Bootstrap 4 Jumbotron

Draw major attention with a Bootstrap jumbotron. Ideal for key marketing messages and calls to action.

In Bootstrap, a jumbotron is a large callout that is styled with large text and heavy padding. By default, Bootstrap 4 jumbotrons are styled in light gray (#eceeef), but you can change this to any color.

To create a jumbotron, apply the .jumbotron class to the <div> element that represents the jumbotron.

<div class="container">

<div class="jumbotron">
<h1>My Jumbotron</h1>
<p>Think BIG with a Bootstrap Jumbotron!</p>
</div>

</div>

Full-Width Jumbotron

To make the jumbotron full width and without the rounded corners, add the .jumbotron-fluid class, and nest a container inside the jumbotron.

<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1>My Jumbotron</h1>
<p>Think BIG with a Bootstrap Jumbotron!</p>
</div>
</div>

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 introduced the .jumbotron-fluid class.

The Bootstrap 3 jumbotron doesn't have/require this class.