Tutorial on How to Create Bootstrap 3 Jumbotron

Bootstrap jumbotron indicates a big box for calling extra attention to some special content or information. It is a gray division with a rounded corner. The Bootstrap jumbotron enlarges the font sizes of the text inside it. Bootstrap jumbotron can be used inside container or container fluid and outside container or container fluid.

To use a jumbotron you need to give the class name .jumbotron to a div

Example: <div class="jumbotron">

jumbotron inside container or container fluid

the jumbotron inside a container or container fluid does not cover 100% of media width and showing its rounded corner and the other property is displayed.

Example:

Try it yourself

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Jumbotron heading insede container or container fluid</h1>      
    <p>a sample paragraph on jumbotron, which indicates a big box for calling extra attention to some special content or information insede container or container fluid</p>
  </div>
  <h1>normal heading insede container or container fluid</h1>      
  <p>normal para insede container or container fluid</p>      
</div>

jumbotron outside container or container fluid

the jumbotron outside a container or container fluid covers 100% of media width and it not showing its rounded corner and the other property is displayed.

Example:

Try it yourself

<div class="jumbotron">
   <h1>Bootstrap Jumbotron heading outside container or container fluid</h1>      
   <p>a sample paragraph on jumbotron, which indicates a big box for calling extra attention to some special content or information outside container or container fluid</p>
</div>
<h1>normal heading outside container or container fluid</h1>      
<p>normal para outside container or container fluid</p>

In this post, you have learned how jumbotron works.

Please provide your valuable comments to make the site better and more useful

Thanks for reading.