Jumbotron & Page Header

Prev Next

This lesson covers two small, unrelated Bootstrap 3 components that are easy to mix up by name alone: the Jumbotron, a large padded callout box built for a hero message, and the Page Header, a much smaller wrapper that just adds a bit of spacing and a border under a section heading. We'll build one of each for TrailMap.

The Jumbotron: A Big, Padded Hero Callout

A .jumbotron is a plain <div> that gets generous padding, a light grey background, and rounded corners — built for a homepage's headline message and a call-to-action button.

<div class="jumbotron">
  <h1>Find Your Next Hike</h1>
  <p>Search thousands of trails by distance, difficulty, and location.</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Browse Trails</a></p>
</div>

Full-Width Jumbotron

Placed inside a .container, a jumbotron keeps rounded corners and stops at the container's edges. Place it outside any .container, then put a .container inside it, and it stretches edge-to-edge across the full width of the viewport with square corners instead.

<!-- edge-to-edge, full-width jumbotron -->
<div class="jumbotron">
  <div class="container">
    <h1>Find Your Next Hike</h1>
    <p>Search thousands of trails by distance, difficulty, and location.</p>
  </div>
</div>

Worked Example: TrailMap's Homepage Hero

A jumbotron used as TrailMap's homepage hero, with a heading, a short pitch, and a call-to-action button.

<div class="jumbotron">
  <h1>TrailMap</h1>
  <p>The hiking-trail directory built by hikers, for hikers. Over 12,000 trails mapped
  and counting.</p>
  <p><a class="btn btn-success btn-lg" href="#" role="button">Find a Trail Near You</a></p>
</div>

The Page Header: A Simple Bordered Heading

A .page-header is a much smaller component — just a wrapper around an <h1> (or another heading level) that adds bottom padding and a thin bottom border, giving a section title some visual breathing room without a jumbotron's heavy background and padding.

<div class="page-header">
  <h1>All Trails</h1>
</div>

Note: A page header can also hold a small subtext next to the heading, commonly wrapped in <small>:

<h1>All Trails <small>showing 214
            results</small></h1>

Worked Example: TrailMap's "All Trails" Listing Heading

A page header sitting at the top of the trail-listing page, well below the jumbotron-sized weight of the homepage hero.

<div class="page-header">
  <h1>All Trails <small>showing 214 results</small></h1>
</div>

Bootstrap 4 and Bootstrap 5: Both .jumbotron and .page-header survived unchanged into Bootstrap 4. Bootstrap 5 then removed both of them entirely, rebuilding the same visual effects with plain utility classes (padding, background-color, and border utilities) instead of dedicated components.

Next, this track moves from static components into interactive behavior, starting with Transitions, the small CSS/JS helper other JS plugins build on top of.

Prev Next