A jumbotron indicates a big box for calling extra attention to some special content or information.
A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font sizes of the text inside it.
Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
Use a <div>
element with class .jumbotron
to create a jumbotron:
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.
Place the jumbotron inside the <div class="container">
if you want the jumbotron to
NOT extend to the edge of the screen:
Place the jumbotron outside the <div class="container">
if you want the jumbotron to extend to the screen edges:
A page header is like a section divider.
The .page-header
class adds a horizontal line under the heading (+ adds some extra space around the element):
Use a <div>
element with class .page-header
to create a page header: