Bootstrap Hero Section: 6 Layouts to Replace the Jumbotron

A hero section is the large banner at the top of a page: a headline, a short line of supporting text, one or two buttons, and often an image. Bootstrap 4 had a jumbotron component for it, but Bootstrap 5 removed it, and heroes are now built from utilities. This guide shows how to recreate the jumbotron in Bootstrap 5.3, then six hero layouts: centered, split with an image, full-screen with a background photo, dark, with a signup form, and with a screenshot, plus tips for making heroes responsive and fast.

What replaced the jumbotron?

Bootstrap 5 dropped .jumbotron because the same look takes a few utility classes. This is the Bootstrap 5 equivalent of a Bootstrap 4 jumbotron:

<div class="p-5 mb-4 bg-body-tertiary rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-5 fw-bold">Custom jumbotron</h1>
    <p class="col-md-8 fs-4">Use utility classes for spacing, background, and type to build the same block the jumbotron used to provide.</p>
    <a class="btn btn-primary btn-lg" href="/get-started">Get started</a>
  </div>
</div>

If you’re upgrading a site with many jumbotrons, you can also add a .jumbotron class back with this CSS:

.jumbotron {
  padding: 4rem 2rem;
  margin-bottom: 2rem;
  background-color: var(--bs-tertiary-bg);
  border-radius: .5rem;
}

1. Centered hero

The most common layout: everything centered, with the text kept to a readable width.

<section class="px-4 py-5 my-5 text-center">
  <h1 class="display-5 fw-bold text-body-emphasis">Build your theme in minutes</h1>
  <div class="col-lg-6 mx-auto">
    <p class="lead mb-4">Pick colors and fonts, preview every component, and export ready-to-use Sass and CSS.</p>
    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
      <a class="btn btn-primary btn-lg px-4" href="/app">Start building</a>
      <a class="btn btn-outline-secondary btn-lg px-4" href="/guides/">Read the guides</a>
    </div>
  </div>
</section>

• col-lg-6 mx-auto keeps the paragraph to half the width on large screens, so lines don’t get too long.
• d-grid gap-2 d-sm-flex stacks the buttons full width on phones and puts them side by side from 576px up.
• display-5 is a large heading size. The typography guide lists all six.

2. Split hero with an image

Text on one side, an image on the other, stacking on phones:

<section class="container col-xxl-8 px-4 py-5">
  <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
    <div class="col-10 col-sm-8 col-lg-6 mx-auto">
      <img src="/images/hero-app.png" class="d-block mx-lg-auto img-fluid" width="700" height="500" alt="The app's dashboard" loading="eager">
    </div>
    <div class="col-lg-6">
      <h1 class="display-5 fw-bold text-body-emphasis lh-1 mb-3">Analytics your whole team can read</h1>
      <p class="lead">One dashboard for traffic, signups, and revenue, with no setup.</p>
      <div class="d-grid gap-2 d-md-flex justify-content-md-start">
        <a class="btn btn-primary btn-lg px-4 me-md-2" href="/signup">Try it free</a>
        <a class="btn btn-outline-secondary btn-lg px-4" href="/demo">See a demo</a>
      </div>
    </div>
  </div>
</section>

flex-lg-row-reverse puts the image on the right on large screens while keeping it first in the HTML, so on phones the image shows above the text. Remove it to put the text first everywhere. align-items-center vertically centers the two columns. The grid guide explains the column classes.

3. Full-screen hero with a background image

A hero that fills the screen, with a photo behind it and a dark overlay so the text stays readable:

<section class="position-relative d-flex align-items-center min-vh-100 text-white">
  <img src="/images/hero-mountains.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="" fetchpriority="high">
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-50"></div>
  <div class="container position-relative py-5">
    <div class="col-lg-7">
      <h1 class="display-3 fw-bold">Explore further</h1>
      <p class="lead mb-4">Guided hiking trips in the Alps, from weekend walks to two-week treks.</p>
      <a class="btn btn-light btn-lg" href="/trips">Browse trips</a>
    </div>
  </div>
</section>

• min-vh-100 makes the section at least as tall as the screen, and d-flex align-items-center centers the content vertically.
• The <img> with object-fit-cover fills the section like a CSS background, but loads with priority and can use srcset for smaller phones.
• bg-black bg-opacity-50 is the overlay. Use a stronger opacity for busy photos.
• position-relative on the container lifts the text above the overlay.

The backgrounds guide covers overlays and gradients, and the position guide explains the layers.

If a full-screen hero hides everything else, try min-vh-75 in your own CSS (min-height: 75vh), or py-5 padding alone, so visitors can see there’s more below.

4. Dark hero

Set data-bs-theme="dark" on the section, and Bootstrap’s colors switch for that block only:

<section class="bg-dark text-body-secondary px-4 py-5 text-center" data-bs-theme="dark">
  <div class="py-5">
    <h1 class="display-5 fw-bold text-white">Ship faster</h1>
    <div class="col-lg-6 mx-auto">
      <p class="fs-5 mb-4">Deploy from Git in seconds, with previews for every pull request.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <a class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold" href="/start">Get started</a>
        <a class="btn btn-outline-light btn-lg px-4" href="/docs">Docs</a>
      </div>
    </div>
  </div>
</section>

The dark mode guide explains data-bs-theme.

5. Hero with a signup form

For a landing page whose goal is a signup, put the form in the hero:

<section class="container col-xl-10 col-xxl-8 px-4 py-5">
  <div class="row align-items-center g-lg-5 py-5">
    <div class="col-lg-7 text-center text-lg-start">
      <h1 class="display-4 fw-bold lh-1 text-body-emphasis mb-3">Get the weekly newsletter</h1>
      <p class="col-lg-10 fs-4">Five links about front-end design every Friday. No spam, unsubscribe anytime.</p>
    </div>
    <div class="col-md-10 mx-auto col-lg-5">
      <form class="p-4 p-md-5 border rounded-3 bg-body-tertiary">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="hero-email" placeholder="name@example.com" required>
          <label for="hero-email">Email address</label>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">Subscribe</button>
        <p class="small text-body-secondary mt-3 mb-0">We'll only use your email for the newsletter.</p>
      </form>
    </div>
  </div>
</section>

text-center text-lg-start centers the text on phones and left-aligns it from 992px up; the text alignment guide covers these classes. Floating labels are covered in the forms guide.

6. Hero with a cropped screenshot

A centered headline with a product screenshot below it, cut off at the bottom so the hero doesn’t get too tall:

<section class="px-4 pt-5 my-5 text-center border-bottom">
  <h1 class="display-4 fw-bold text-body-emphasis">Every component, one theme</h1>
  <div class="col-lg-6 mx-auto">
    <p class="lead mb-4">Change a variable and see buttons, forms, cards, and navbars update together.</p>
    <div class="d-grid gap-2 d-sm-flex justify-content-sm-center mb-5">
      <a class="btn btn-primary btn-lg px-4 me-sm-3" href="/app">Open the builder</a>
    </div>
  </div>
  <div class="overflow-hidden" style="max-height: 30vh;">
    <div class="container px-5">
      <img src="/images/builder-screenshot.png" class="img-fluid border rounded-3 shadow-lg mb-4" width="700" height="500" alt="The theme builder" loading="eager">
    </div>
  </div>
</section>

overflow-hidden with a max-height crops the screenshot, which hints that there’s more to scroll to.

Make heroes responsive and fast

• Scale the heading. Bootstrap’s display-* and heading sizes shrink on small screens automatically with responsive font sizes. If a headline is still too long on phones, shorten it rather than shrinking it further.
• Stack buttons on phones with d-grid gap-2 d-sm-flex, so each button is easy to tap.
• Don’t lazy-load the hero image. It’s usually the largest element on the page, so give it fetchpriority="high" or loading="eager", and set width and height to avoid layout shift. The images guide covers responsive images.
• Use one main button. A primary button for the main action and an outline button for the second keeps the choice clear.
• Check contrast. Text over photos needs an overlay; aim for at least a 4.5:1 contrast ratio.
• Use one <h1>. The hero headline is usually the page’s <h1>.

A hero is the first section of a landing page template, often right below the navbar. To restyle every hero at once, change the theme’s colors and fonts in the bootstrap.build builder.

FAQ

What replaced the jumbotron in Bootstrap 5?

Nothing directly. Bootstrap 5 removed the jumbotron component, and the same look is built with utilities: p-5 mb-4 bg-body-tertiary rounded-3 on a <div>, with a display-5 heading and a lead or fs-4 paragraph inside.

How do I make a hero section in Bootstrap 5?

Use a <section> with padding (py-5), a large heading (display-5 fw-bold), a short paragraph with lead, and buttons. Center it with text-center and col-lg-6 mx-auto, or use a grid row for a text and image layout.

How do I make a full-screen hero in Bootstrap?

Add min-vh-100 to the section to make it at least the height of the screen, and d-flex align-items-center to center the content vertically. For a background photo, use an absolutely positioned <img> with object-fit-cover and an overlay.

How do I add a background image to a Bootstrap hero?

Either set background: url('image.jpg') center / cover on the section, or place an <img> with position-absolute top-0 start-0 w-100 h-100 object-fit-cover behind the content. Add a layer with bg-black bg-opacity-50 between the image and the text so it stays readable.

Can I still use the jumbotron class in Bootstrap 5?

Not without adding it yourself. Bootstrap 5 has no .jumbotron styles, so the class does nothing. Replace it with utilities, or add a small .jumbotron rule to your CSS with padding, a background color, and a border radius.

How tall should a hero section be?

Tall enough for the headline, text, and buttons, with space around them. Full-screen heroes look dramatic but hide the rest of the page, so many sites use padding such as py-5 or a height of about 60 to 75 percent of the screen.