Post
Ask Question

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. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part8</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <!--Creating Jumbotron inside container-->  
  13.         <div class="jumbotron">  
  14.             <h1>Bootstrap Jumbotron</h1>  
  15.             <p>It is Bootstrap Jumbotron inside Container</p>  
  16.             <p><a href="#" class="btn btn-info" role="button">See More Information</a></p>  
  17.         </div>  
  18.     </div>  
  19.     <script src="js/jquery-2.1.4.min.js"></script>  
  20.     <script src="js/bootstrap.min.js"></script>  
  21. </body>  
  22. </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. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part8</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <!--Creating Jumbotron outside container-->  
  12.     <div class="jumbotron">  
  13.         <h1>Bootstrap Full Width Jumbotron</h1>  
  14.         <p>It is Bootstrap Jumbotron Outside Container</p>  
  15.         <p><a href="#" class="btn btn-info" role="button">See More Information</a></p>  
  16.     </div>  
  17.     <div class="container">  
  18.         <p><strong>This is text in the container</strong></p>  
  19.         <p><b>Hello C# Corner</b></p>  
  20.         <p><i><b>Learn Bootstrap</b></i></p>  
  21.     </div>  
  22.     <script src="js/jquery-2.1.4.min.js"></script>  
  23.     <script src="js/bootstrap.min.js"></script>  
  24. </body>  
  25. </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.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part8</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <!--Creating Jumbotron inside container-->  
  13.         <div class="jumbotron">  
  14.             <h2>Bootstrap Jumbotron</h2>  
  15.             <p><i>Welcome!Learn Bootstrap...</i></p>  
  16.             <p><a href="#" class="btn btn-primary" role="button">See More</a></p>  
  17.         </div>  
  18.     </div>  
  19.     <script src="js/jquery-2.1.4.min.js"></script>  
  20.     <script src="js/bootstrap.min.js"></script>  
  21. </body>  
  22. </html>  
Step 2 : Now we will apply some styles on Jumbotron to create more interactive for webpages by writing the following code.
 
 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part8</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <!--Creating Jumbotron inside container-->  
  13.         <div class="jumbotron" style="margin-top: 15px;background-image: url(images/back.jpg)">  
  14.             <!-- style Text Color for h2-->  
  15.             <h2 style="color:#200662">Bootstrap Jumbotron</h2>  
  16.             <p><i>Welcome!Learn Bootstrap...</i></p>  
  17.             <p><a href="#" class="btn btn-primary" role="button">See More</a></p>  
  18.         </div>  
  19.     </div>  
  20.     <script src="js/jquery-2.1.4.min.js"></script>  
  21.     <script src="js/bootstrap.min.js"></script>  
  22. </body>  
  23. </html>  
Output
 
 
 
In this article we focused on Bootstrap Jumbotron. In upcoming articles we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap:


Similar Articles