BS Jumbotron
Creating a Jumbotron
A jumbotron is a large box that draws extra attention to some exceptional material or information.
A jumbotron appears like a gray box with rounded corners. It also increases the font size of the text within it.
Tip: A jumbotron can contain almost any acceptable HTML, including other Bootstrap elements/classes.
To construct a jumbotron, add a <div> element with the class .jumbotron.
Jumbotron Inside Container
To prevent the jumbotron from extending beyond the screen’s edge, place it inside the <div class=”container”>.
Example
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing
responsive, mobile-first projects on the web.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Jumbotron Outside Container
To have the jumbotron expand to the screen boundaries, place it outside the <div class=”container”>.
Example
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
<p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
mobile-first projects on the web.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
Creating a Page Header
A page header functions similarly to a section separator.
The .page-header class adds a horizontal line under the title and some more space around the element.
Example Page Header
To construct a page header, use a <div> element with the class .page-header.
Example
<div class="page-header">
<h1>Example Page Header</h1>
</div>
