Tutorials References Exercises Videos Menu
Create Website Get Certified Upgrade

Bootstrap 4 Jumbotron


Bootstrap 4 Jumbotron

A jumbotron indicates a big grey box for calling extra attention to some special content or information.

Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.

Bootstrap Tutorial

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

Use a <div> element with class .jumbotron to create a jumbotron:

Example

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>
  <p>Bootstrap is the most popular HTML, CSS...</p>
</div>
Try it Yourself »

Full-width Jumbotron

If you want a full-width jumbotron without rounded borders, add the .jumbotron-fluid class and a .container or .container-fluid inside of it:

Example

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1>Bootstrap Tutorial</h1>
    <p>Bootstrap is the most popular HTML, CSS...</p>
  </div>
</div>
Try it Yourself »