Bootstrap 5 Hero Section
A hero section is the large, prominent area at the top of a web page, the first thing visitors see. In Bootstrap 5, hero sections are built using jumbotron-style containers (jumbotron was removed in BS5), now replaced with custom padded sections using utility classes.
Bootstrap class
No dedicated Bootstrap class
Common use cases
- Landing page above-the-fold section
- Product or app hero with screenshot
- Split hero with image and text
- Full-screen video background hero
- Gradient background hero with CTA
Variants and classes
| Variant | Description and classes |
|---|---|
| Centred Hero | Text and CTA centred, clean background.py-5 text-center + container + btn btn-primary btn-lg |
| Split Hero | Two columns: text left, image right.row align-items-center + col-lg-6 |
| Dark Background Hero | Dark section with white text and coloured CTA.py-5 bg-dark text-white |
| Gradient Hero | CSS gradient background with white text.py-5 text-white bg-primary bg-gradient |
| Full-screen Hero | 100vh height with vertically centred content.min-vh-100 d-flex align-items-center |
Code example
<section class="py-5 py-lg-6 bg-dark text-white">
<div class="container">
<div class="row align-items-center gy-5">
<div class="col-lg-6">
<h1 class="display-5 fw-bold mb-4">Build faster with Canvas</h1>
<p class="lead text-white-50 mb-5">
Generate a production-ready Bootstrap 5 page in about 3 minutes.
Describe any page: get clean, deployable code.
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/chat" class="btn btn-primary btn-lg px-4">Start Free →</a>
<a href="/examples" class="btn btn-outline-light btn-lg px-4">See Examples</a>
</div>
</div>
<div class="col-lg-6">
<img width="800" height="520" src="https://picsum.photos/seed/cb-hero-preview/800/520" alt="Canvas Builder preview" class="img-fluid rounded-3 shadow-lg">
</div>
</div>
</div>
</section>Live examples
Standard Hero with CTA
Dark gradient hero section with headline, subtitle, and dual call-to-action buttons.
Split Hero (Text + Image)
Two-column hero with text on the left and a visual placeholder on the right.
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:
- Transparent overlay hero with full-bleed background image
- Minimal white hero with animated word rotator
- Dark split hero with product screenshot
- Gradient hero with video background
- Hero with logo strip and social proof below CTA
Best practices
Keep the CTA above the fold on mobile
Test your hero height on a 375px wide viewport. Your primary CTA must be visible without scrolling on mobile. Use min-h and appropriate padding, not a fixed pixel height.
Use display-5 or display-4 for hero headlines
Bootstrap 5's display utility classes (display-1 through display-6) produce large, impactful headlines appropriate for hero sections. Pair with fw-bold for maximum weight.
Lazy-load hero background images
Full-screen background images in heroes are LCP elements. They directly impact your Core Web Vitals score. Use eager loading (loading='eager') on the hero image and optimise the file size.