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
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.
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.
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.
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.