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:
Next a div with the Bootstrap class container is used:
A div with the Bootstrap class row text-center can center subsequent child elements which will contain text:
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.
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:
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:
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.
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.