Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Web Browser

Code Editor
Reset Exercise
Learn

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!

Report a Bug
If you see a bug or any other issue with this page, please report it here.