Bootstrap Jumbotron

Advertisements


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

  • simply 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>
Jumbotron Demo

To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all .container classes and instead add a .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>
Jumbotron Full Width Demo


Advertisements
Advertisements