Web Browser

Code Editor
Learn
Building with Bootstrap

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!

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