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!

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.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Already have an account?