The Jumbotron

In addition to a header/navigation, many websites have a large showcase area featuring important content. Bootstrap refers to this as a jumbotron. Below is an example implementation of a jumbotron.

First, a new section element is created and assigned the jumbotron class:

<section class="jumbotron">

</section>

Next a div with the Bootstrap class container is used:

<section class="jumbotron">
  <div class="container">
  ... 
  </div>
</section>

A div with the Bootstrap class row text-center can center subsequent child elements which will contain text:

<section class="jumbotron">
  <div class="container">
    <div class="row text-center">
       ...
    </div>
  </div>
</section>

The ... is a placeholder for HTML elements containing text, such as h2, p or anchor elements.

Let's explore the jumbotron feature by creating our own below!