Bootstrap Jumbotron

In this article we will cover the most important feature “Jumbotron” of Bootstrap. Jumbotron optionally increases the size of headings and add a lot of margins for content on landing page as like its name Jumbotron. To use the Jumbotron follow the following steps and then code.

• 
  

  First of add a container <div> with the class of .jumbotron.

  
  


• 
  

  Then add a larger <h1> in the jumbotron div, here the font-weight of <h1> is reduced to 200px.

  
  

The following example demonstrates this:

<div class="container">
 <div class="jumbotron">
 <h1>Welcome to landing page!</h1>
 <p>This is an example for jumbotron.</p>
 <p><a class="btn btn-primary btn-lg" role="button">
 Learn more</a>
 </p>
 </div>
</div>

To make thejumbotron without rounded corners and full width use the .jumbotron class outside all .container classes and instead inside .container within as shown in the following example:

<div class="jumbotron">
 <div class="container">
 <h1>Welcome to landing page!</h1>
 <p>This is an example for jumbotron.</p>
 <p><a class="btn btn-primary btn-lg" role="button">
 Learn more</a>
 </p>
 </div>
</div>

Demo

Bootstrap Jumbotron