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 <span> with the class of .jumbotron.

In addition to a larger <h1>, the font-weight is reduced to 200px.

The following example demonstrates this −

<span class = "container">

   <span 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>
   </span>
   
</span>