BBS5 Jumbotron

Creating a Jumbotron (Hero section) in Bootstrap 5.

BS5 Jumbotron / Hero Section

Bootstrap 5 no longer has a dedicated .jumbotron class like Bootstrap 4. However, you can easily create the same effect with utility classes.

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

You can use a <div> element with the .p-5, .bg-primary/secondary/etc, .text-white, and .rounded classes to create a Jumbotron.

html/css

Creating a hero section with utilities.

<div class="mt-4 p-5 bg-primary text-white rounded">
  <h1>Jumbotron Example</h1>
  <p>Lorem ipsum...</p>
</div>