Jumbotron

Jumbotron

A jumbotron is a big, gray box that stands out, used to draw attention to a special message or feature. In Bootstrap 5 it is now created by combining utility classes.

The Bootstrap 5 way

Bootstrap 5 removed the dedicated .jumbotron component. You rebuild it with padding, background, and rounded utilities:

<div class="mt-4 p-5 bg-primary text-white rounded">
  <h1>Jumbotron Example</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

What the classes do

• .mt-4 adds top margin.
• .p-5 adds big padding.
• .bg-primary sets the background color.
• .text-white makes text white.
• .rounded rounds the corners.

A gray jumbotron

For the classic gray look, use .bg-light instead:

<div class="mt-4 p-5 bg-light rounded">
  <h1>Jumbotron</h1>
  <p>Some text here.</p>
</div>

TL;DR

• Bootstrap 5 has no dedicated jumbotron class.
• Combine .p-5, a .bg- color, .text-, and .rounded.
• Add .mt-4 for spacing from elements above.