Log in from a computer to take this course

You'll need to log in from a computer to start How to Make a Website with NameCheap. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
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

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

Or sign up using:

Already have an account?