Bootstrap 5 Hero Section
A Hero Section is the large introductory block at the top of a page, combining a headline, supporting text, and one or two calls to action, often alongside an image or background. Bootstrap 5 has no dedicated hero class (the Bootstrap 4 .jumbotron was removed), so heroes are built from the container, grid, spacing, display heading, and flex utilities. Use it on any landing page, homepage, or campaign page where visitors must grasp the offer within a few seconds.
Bootstrap class
.container .row .align-items-center .py-5 .display-4 .leadCommon use cases
- A SaaS homepage hero with a benefit-led headline, a free trial button, and a dashboard screenshot on the right.
- A restaurant landing page with a full-height background photo, the opening hours, and a Reserve a Table button.
- A webinar registration page with a centered headline, event date, and a single sign-up CTA above the fold.
- A real estate agency hero with an overlay image of a featured property and a prominent search or enquiry button.
Variants and classes
| Variant | Description and classes |
|---|---|
| Centered hero | A single column of centered text with a narrow max width so the headline stays readable..container .text-center .py-5 .display-4 .fw-bold .col-lg-8 .mx-auto .lead |
| Split hero | Text on one side and an image or product screenshot on the other, stacking on small screens..container .row .align-items-center .g-5 .col-lg-6 .img-fluid |
| Full-height hero | Fills the viewport and vertically centers its content, common for homepage openers..min-vh-100 .d-flex .align-items-center |
| Dark hero | Uses a dark background with light text for strong contrast and a more premium feel..bg-dark .text-white .py-5 .btn .btn-light .btn-lg |
| Background image with overlay | Places text over a photo, with an absolutely positioned dark layer to keep the text legible..position-relative .position-absolute .top-0 .start-0 .w-100 .h-100 .bg-dark .opacity-50 .text-white |
| Rounded callout hero | A contained, padded box that replicates the old jumbotron look inside a page layout..p-5 .mb-4 .bg-body-tertiary .rounded-3 |
Code example
<section class="bg-dark text-white py-5">
<div class="container py-lg-5">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h1 class="display-4 fw-bold mb-3">Book your next appointment in 30 seconds</h1>
<p class="lead mb-4">Online scheduling for independent clinics, with automatic reminders that cut no-shows by up to 40%.</p>
<div class="d-flex flex-column flex-sm-row gap-3">
<a href="/signup" class="btn btn-primary btn-lg px-4">Start free trial</a>
<a href="/demo" class="btn btn-outline-light btn-lg px-4">Watch demo</a>
</div>
</div>
<div class="col-lg-6">
<img src="images/dashboard.webp" class="img-fluid rounded-3 shadow" alt="Scheduling dashboard showing a weekly calendar" width="720" height="480" fetchpriority="high">
</div>
</div>
</div>
</section>Live examples
Basic Hero Section
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Canvas Builder generates full-width hero sections using Canvas template section wrappers, with your brand colours applied to buttons, accents, and overlays rather than default Bootstrap blue.
- Split layouts pair a headline, subheading, and dual CTA buttons with an image column, using Bootstrap's responsive grid so the image drops below the text on mobile.
- Dark and image-backed variants add an overlay and light text classes automatically, keeping headline contrast readable over photography.
Best practices
Use one H1 and make it the hero headline
Put the primary keyword and value proposition in a single <h1 class="display-4">. Style size with display classes instead of switching heading levels, so the document outline stays correct.
Limit the line length of hero text
Wrap centered copy in .col-lg-8 .mx-auto or set a max-width on the paragraph. Lines wider than about 70 characters are harder to read and make the hero feel unfocused.
Stack buttons on mobile with flex utilities
Use .d-flex .flex-column .flex-sm-row .gap-3 so CTAs are full-width and easy to tap on phones, then sit side by side from the sm breakpoint upward.
Do not lazy-load the hero image
The hero image is usually the Largest Contentful Paint element. Skip loading="lazy", add fetchpriority="high", and set width and height attributes to avoid layout shift.
Check overlay contrast, not just the photo
When text sits on an image, use a dark layer with .bg-dark .opacity-50 or a CSS gradient and test the contrast ratio. White text should reach at least 4.5:1 against the busiest part of the image.