Bootstrap Jumbotron / Hero Section
The classic 'Jumbotron' component was removed in Bootstrap 5, but you can easily recreate a hero/banner section using regular utility classes like padding, background color and rounded corners.
A hero section is usually the first thing visitors see: a large heading, a short description, and a call-to-action button, all inside a padded, full-width or contained block.
<div class="p-5 mb-4 bg-light rounded-3">...</div>Building a hero with utilities
Combine a container or container-fluid with padding classes (like .py-5), a background color (.bg-light), and rounded corners (.rounded-3) to build a jumbotron-style section.
Adding a call to action
Inside the hero block, place a heading, a lead paragraph, and a prominent button using .btn .btn-primary .btn-lg to encourage visitors to take action.
<div class="p-5 mb-4 bg-light rounded-3">
<h1 class="display-5 fw-bold">Welcome to my site</h1>
<p class="lead">This is a simple hero section built with utility classes.</p>
<a href="#" class="btn btn-primary btn-lg">Get Started</a>
</div>A padded, rounded, light-gray box with a big heading, text, and a large blue buttonThis recreates the classic jumbotron look using only spacing, background and text utilities.
<div class="container-fluid py-5 bg-primary text-white text-center">
<h1>Big Sale Today!</h1>
<p>Save up to 50% on all items.</p>
</div>A full-width blue banner with centered white textcontainer-fluid keeps it full width, while py-5 adds generous vertical padding.
Key points
- The .jumbotron class was removed in Bootstrap 5.
- Hero sections are now built from utility classes like padding and background color.
- .rounded-3 gives the section soft, rounded corners.
- A hero typically has a heading, short text, and a call-to-action button.