Bootstrap Jumbotron

Bootstrap 5: Hero Sections & Page Headers

In Bootstrap 5, the .jumbotron and .page-header components have been removed. This section demonstrates how to create similar-looking, prominent content sections (often called “hero” sections) and page headers using Bootstrap’s utility classes and standard HTML elements.

Creating a Hero Section (Jumbotron Alternative)

A hero section is a large, prominent area typically at the top of a webpage, used to showcase key content or calls to action. While .jumbotron is gone, you can easily replicate its effect with utility classes for padding, background color, and rounded corners.

• Padding: p-5 (large padding), py-5 (large vertical padding), etc.
• Background color: bg-light, bg-dark, bg-primary, or custom background classes.
• Rounded corners: rounded-3 (large rounding), etc.
• Text utilities: text-center, display-* for large headings, fs-* for font sizes.

Bootstrap Tutorial
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.

Hero Section Inside a Container

To create a hero section that respects the boundaries of a standard Bootstrap container (not full-width):

<div class="container py-4">
  <div class="p-5 mb-4 bg-light rounded-3">
    <div class="container-fluid py-5">
      <h1 class="display-5 fw-bold">Bootstrap 5 Tutorial</h1>
      <p class="col-md-8 fs-4">Using a series of utility classes, you can create this hero section, just like the old Bootstrap jumbotron component. It's highly customizable!</p>
      <button class="btn btn-primary btn-lg" type="button">Learn more</button>
    </div>
  </div>

  <div class="row align-items-md-stretch">
    <div class="col-md-6">
      <div class="h-100 p-5 text-bg-dark rounded-3">
        <h2>Another Section</h2>
        <p>Or, keep it light and add a border for some added definition.</p>
        <button class="btn btn-outline-light" type="button">Example button</button>
      </div>
    </div>
    <div class="col-md-6">
      <div class="h-100 p-5 bg-body-tertiary border rounded-3">
        <h2>And Another</h2>
        <p>Swap the background-color utility and add a `.border` utility.</p>
        <button class="btn btn-outline-secondary" type="button">Example button</button>
      </div>
    </div>
  </div>

  <footer class="pt-3 mt-4 text-body-secondary border-top">
    &copy; 2023
  </footer>
</div>

<!--
  Explanation:
  - `div.container.py-4`: Main container with vertical padding.
  - `div.p-5.mb-4.bg-light.rounded-3`: The hero section itself. `p-5` for padding, `mb-4` for bottom margin, `bg-light` for background, `rounded-3` for rounded corners.
  - `div.container-fluid.py-5`: Inner container for content, `py-5` for more vertical padding inside the hero.
  - `h1.display-5.fw-bold`: Large, bold heading.
  - `p.col-md-8.fs-4`: Paragraph constrained in width on medium screens and up, with a larger font size.
  - This example is adapted from the official Bootstrap 5 examples for Jumbotrons: https://getbootstrap.com/docs/5.3/examples/jumbotron/
-->

Application Scenario: Hero sections are ideal for homepages to introduce a product, service, or key message, often accompanied by a strong call-to-action button.

Full-Width Hero Section

To create a hero section that spans the full width of the viewport, place the styled <div> outside of any .container that would restrict its width. The content inside can still use a .container to maintain standard content width.

<div class="bg-dark text-secondary px-4 py-5 text-center">
  <div class="py-5">
    <h1 class="display-5 fw-bold text-white">Full-Width Hero</h1>
    <div class="col-lg-6 mx-auto">
      <p class="fs-5 mb-4">This hero section extends to the screen edges. The content within can be centered and constrained using grid columns and auto margins.</p>
      <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
        <button type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Custom button</button>
        <button type="button" class="btn btn-outline-light btn-lg px-4">Secondary</button>
      </div>
    </div>
  </div>
</div>

<div class="container mt-4">
  <p>This is some regular content below the full-width hero section, within a standard container.</p>
</div>

<!--
  Explanation:
  - `div.bg-dark.text-secondary.px-4.py-5.text-center`: The full-width hero. `px-4` and `py-5` provide padding.
  - `div.py-5`: Additional vertical padding for inner content.
  - `h1.display-5.fw-bold.text-white`: Heading styled for the dark background.
  - `div.col-lg-6.mx-auto`: Centers the paragraph and buttons on larger screens.
  - This example is inspired by official Bootstrap 5 examples for Heroes: https://getbootstrap.com/docs/5.3/examples/heroes/
-->

Creating a Page Header (Section Divider)

The .page-header class is also removed in Bootstrap 5. You can create visually similar section dividers using standard headings (<h1>-<h6>), horizontal rules (<hr>), and margin/padding utilities.

Example Page Header

Use a combination of a heading and an optional <hr> with margin utilities:

<div class="container mt-5">
  <div class="pb-2 mb-4 border-bottom">
    <h1>Example Page Header <small class="text-muted fs-5">with a subtext</small></h1>
  </div>
  <p>This is content following the page header. The `border-bottom` utility on a wrapper div or an `<hr>` element can create the dividing line.</p>

  <h2 class="mt-5">Another Section Title</h2>
  <hr class="my-4">
  <p>Content for another section. Here, an `<hr>` with vertical margin (`my-4`) is used.</p>
</div>

<!--
  Explanation:
  - First example: `div.pb-2.mb-4.border-bottom` wraps an `<h1>`. `pb-2` (padding-bottom) and `mb-4` (margin-bottom) provide spacing, and `border-bottom` adds the line.
  - Second example: A simple `<h2>` followed by `<hr class="my-4">` (margin top and bottom).
  - Customize spacing and line style as needed with Bootstrap utilities or custom CSS.
-->

Application Scenario: Page headers are useful for clearly delineating major sections of a page, improving structure and scannability.