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!

Instructions

1.

In index.html, one line below the closing </header> tag, Create a section with the jumbotron class.

<section class="jumbotron"> </section>

Run your code. In the web browser, notice a large photo covering the main part of the webpage.

2.

Inside the opening <section class="jumbotron"> tag, create a div with the container class:

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

Don’t forget your </div> closing tag!

Run your code to continue. There won’t yet be a visual change in the web browser.

3.

To center text over the jumbotron image, create another div inside the container div. Give the new div a class of row text-center:

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

The ... is a placeholder for where text elements will go next.

Run your code to continue. There still will not be a visual effect on the web browser.

4.

Finally, add heading and anchor elements to the row.

The anchor element will have Bootstrap’s btn btn-primary class, which will transform it into a button.

<section class="jumbotron"> <div class="container"> <div class="row text-center"> <h2>Homemade Goods</h2> <h3>This Year's Best</h3> <a class="btn btn-primary" href="#" role="button">See all</a> </div> </div> </section>

Run your code to see the elements centered over the jumbotron image in the web browser.

If you’d like, replace text between h2 , h3 and a tags with text of your choice.

Note: The anchor element’s href attribute, #, is a placeholder for an actual URL.

Folder Icon

Take this course for free

Already have an account?