Bootstrap For Beginners - Part Eight (Bootstrap Jumbotron)

Introduction

I have started an article series on Bootstrap and published seven articles so far. Read the previous seven parts here,

In this article we will learn about Bootstrap Jumbotron component with different styles and see how it is useful on webpages.

Bootstrap Jumbotron

A Jumbotron provides some different look for heading or we can say it is used to show some special content or information on the webpages, it is displayed as a gray box with rounded corners. It also increase the font sizes of the text inside it. To create a Jumbotron we use <div> element with class .jumbotron.

Creating Jumbotron Inside Container

We place the Jumbotron component by using .jumbotron class inside the <div> with class .container by which it is not extend to the edge of the screen.

Example 1 : Jumbotron Inside Container

In this example we will create a <div> with .container class, inside it we will add one <div> with class .jumbotron and inside jumbotron we can put any HTML, Bootstrap elements for Heading, Descriptions, etc. We will create jumbotron by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part8</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Jumbotron</h1>
<p>It is Bootstrap Jumbotron inside Container</p>
<p><a href="#" class="btn btn-info" role="button">See More Information</a></p>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Jumbotron inside Container

Creating Full Page Width Jumbotron

To create a jumbotron of full width, and without rounded corners. We place the jumbotron outside the <div class="container">, it covers the full width of the screen.

Example 2: Jumbotron Outside Container

In this example we will create <div> with class .jumbotron and we will put it outside all the containers or we can also add the container within jumbotron. Now we will create jumbotron outside Container by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part8</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1>Bootstrap Full Width Jumbotron</h1>
<p>It is Bootstrap Jumbotron Outside Container</p>
<p><a href="#" class="btn btn-info" role="button">See More Information</a></p>
</div>
<div class="container">
<p><strong>This is text in the container</strong></p>
<p><b>Hello C# Corner</b></p>
<p><i><b>Learn Bootstrap</b></i></p>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output: Jumbotron outside container

Modify Jumbotron with Styles

Now we will create Jumbotron like above examples and then we will apply some styles on it, so we can modify and create interactive Jumbotron for webpages according to our requirement.

Step 1 : Firstly, we will create Jumbotron inside container by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part8</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h2>Bootstrap Jumbotron</h2>
<p><i>Welcome!Learn Bootstrap...</i></p>
<p><a href="#" class="btn btn-primary" role="button">See More</a></p>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Step 2 : Now we will apply some styles on Jumbotron to create more interactive for webpages by writing the following code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Part8</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron" style="margin-top: 15px;background-image: url(images/back.jpg)">
<h2 style="color:#200662">Bootstrap Jumbotron</h2>
<p><i>Welcome!Learn Bootstrap...</i></p>
<p><a href="#" class="btn btn-primary" role="button">See More</a></p>
</div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Output

In this article we focused on Bootstrap Jumbotron. In upcoming articles we will understand all the components of Bootstrap step by step.