Bootstrap 5 Hero Section

The Bootstrap 5 hero section replaces the deprecated jumbotron from Bootstrap 4. This page covers 5 hero section patterns — from a simple centered layout to gradient, split screen and image background heroes — each ready to copy and use.

Quick Setup

Hero sections need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

Class	What It Does
`.py-5`	Vertical padding (replaces jumbotron padding)
`.display-5`	Large hero heading size
`.lead`	Larger intro paragraph text
`.min-vh-100`	Full viewport height section
`.d-flex align-items-center`	Vertically center content
`.text-center`	Center all text
`.position-relative`	Required for overlay technique
`.position-absolute`	Used for background overlay div
`.object-fit-cover`	Makes images/video fill container

1. Basic Bootstrap 5 Hero Section

A clean centered hero section with heading, subtext and CTA buttons. Replaces the deprecated Bootstrap 4 jumbotron.

2. Bootstrap 5 Gradient Hero Section

A dark gradient hero with colored heading and CTA. Great for SaaS and developer tool landing pages.

3. Bootstrap 5 Split Hero Section

A two-column hero with text on the left and image or illustration on the right.

4. Bootstrap 5 Hero with Background Image

A full-width hero section with a background image, dark overlay and centered content.

5. Bootstrap 5 Minimal Hero Section

A clean minimal hero with large typography, no background color. Ideal for portfolios and agencies.

Frequently Asked Questions

What replaced the Bootstrap 4 jumbotron in Bootstrap 5?▲

Bootstrap 5 removed the jumbotron component. The recommended replacement is to use utility classes directly: a section with py-5 bg-light and a container inside with your content. This gives you more flexibility than the fixed jumbotron.

How do I make a full height hero section in Bootstrap 5?▼

Add min-vh-100 class and d-flex align-items-center to your section element: <section class='min-vh-100 d-flex align-items-center'>. This makes the hero section at least 100% of the viewport height with vertically centered content.

How do I add a dark overlay to a Bootstrap 5 hero background image?▼

Add position-relative to the section, then add an absolutely positioned div with a semi-transparent background: <div class='position-absolute top-0 start-0 w-100 h-100' style='background:rgba(0,0,0,0.6)'></div>. Add position-relative to your content div so it appears above the overlay.

How do I make a Bootstrap 5 hero section responsive?▼

Use Bootstrap's grid system with col-lg-6 for split layouts. Use display utility classes like d-flex and flex-wrap for button groups. Set max-width on paragraphs using mx-auto for centered layouts. Images use img-fluid for responsive sizing.

How do I add a video background to a Bootstrap 5 hero?▼

Add a video element with position-absolute, top-0, start-0, w-100, h-100 and object-fit-cover inside a position-relative section. Add autoplay, muted and loop attributes to the video. Place a dark overlay div and your content above the video.

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →