Bootstrap - Jumbotron

This chapter will discuss one more feature that Bootstrap supports, the Jumbotron. As the name suggest this component can optionally increase the size of headings and add a lot of margin for landing page content. To use the Jumbotron −

·        Create a container <div> with the class of .jumbotron.

·        In addition to a larger <h1>, the font-weight 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 get a jumbotron of full width, and without rounded corners use the.jumbotron class outside all .container classes and instead add a .containerwithin, 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>