Jumbotron

The Jumbotron is a Bootstrap 4 component for a large, padded, rounded-corner callout box — it's the classic way to build a page or hero header: a big heading, a short lead paragraph, and a call-to-action button, all wrapped in one component that already has generous internal spacing and a light background baked in. We'll use it to build the hero section on TrailMap's homepage.

Bootstrap 4-only pattern: Jumbotron was removed entirely in Bootstrap 5. The Bootstrap team felt it was too opinionated and rarely customized as-is — most people either left it looking exactly like the default or fought its built-in padding/background. If you migrate this page to Bootstrap 5 later, the Jumbotron class disappears and gets rebuilt with plain utility classes instead: padding (p-5), a background color (bg-light), and a border radius (rounded) on a plain <div>. See the Migrating to Bootstrap 5 lesson for the full picture.

The Basic .jumbotron

Add .jumbotron to any container to get a light gray background, generous padding, and rounded corners. Inside it, use normal heading and paragraph markup — a display-* heading class is a common pairing for extra-large hero text.

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>

Edge-to-Edge: .jumbotron-fluid

By default a Jumbotron has rounded corners, which look right when it sits inside a padded container. Add .jumbotron-fluid to remove the rounded corners and horizontal padding so the box can span the full width of the viewport — pair it with a full-width .container-fluid instead of a regular .container for the content inside.

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Worked Example: TrailMap Homepage Hero

Here's the full-width hero section for TrailMap's homepage, built with .jumbotron-fluid. A short lead line sets the tone, and two buttons send visitors either to the trail directory or to the "Submit a Trail" form.

<!-- TrailMap homepage hero -->
<div class="jumbotron jumbotron-fluid bg-light">
  <div class="container">
    <h1 class="display-4">Find your next trail</h1>
    <p class="lead">TrailMap has over 4,000 hiking trails mapped, reviewed, and rated by hikers near you.</p>
    <hr class="my-4">
    <a class="btn btn-primary btn-lg mr-2" href="#trails" role="button">Browse trails</a>
    <a class="btn btn-outline-secondary btn-lg" href="#submit-trail" role="button">Submit a Trail</a>
  </div>
</div>

What the same hero looks like after migrating to Bootstrap 5 — no Jumbotron class exists, so the box is rebuilt from utilities on a plain <div>:

<!-- Bootstrap 5: no .jumbotron, rebuilt with utilities -->
<div class="p-5 bg-light rounded-3">
  <div class="container-fluid py-5">
    <h1 class="display-4">Find your next trail</h1>
    <p class="lead">TrailMap has over 4,000 hiking trails mapped, reviewed, and rated by hikers near you.</p>
  </div>
</div>
Up next: Another Bootstrap-4-only pattern — the Media Object, for pairing an image or avatar with a block of text.