Typography

Bootstrap 4 ships a complete type system on top of its base font-family, sizes and line-heights: a default heading scale you get for free, matching .h1-.h6 classes for when you need heading-sized text on a non-heading element, .lead for intro paragraphs, oversized .display-* headings for marketing-style hero sections, and small helpers for muted text, fine print, highlighted text and blockquotes. Every class below is plain CSS — nothing here needs jQuery.

1. The Default Heading Scale: h1-h6 and .h1-.h6

Bootstrap 4 restyles the native <h1> through <h6> elements with a consistent size/weight/margin scale. If you need that exact same look on a <span>, a <div>, or a <p> — anywhere a real heading tag would be wrong semantically — apply the matching .h1-.h6 class instead.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<!-- Same visual size, but on a non-heading element -->
<p class="h3">Styled like an h3, still a paragraph</p>
<span class="h5">Styled like an h5, still inline</span>

2. Lead Paragraphs: .lead

Add .lead to a paragraph to make it stand out as an introduction — larger font size and a lighter font weight than regular body text. It's the standard companion to a big heading at the top of a page or section.

<h1>TrailMap</h1>
<p class="lead">
  Find your next hike. Real trail reports from real hikers, updated every week.
</p>

3. Display Headings: .display-1 through .display-4

When even h1 isn't big enough — hero banners, landing pages, splash sections — use the four .display-1 to .display-4 classes. They're larger and use a slightly lighter font-weight than the regular heading scale, and .display-1 is the biggest.

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

4. Muted Text, Fine Print, and Highlights

Three small, frequently-used pieces of inline typography: .text-muted for de-emphasized text, the native <small> element for fine print (Bootstrap resizes it to about 80% automatically), and <mark> for a highlighted, "found this" style span.

<p>Posted 3 days ago <span class="text-muted">by Priya S.</span></p>

<p>
  Full price $49.
  <small class="text-muted">Taxes and permit fees not included.</small>
</p>

<p>Trail matched your search for <mark>waterfall</mark>.</p>

5. Blockquotes

Wrap a quotation in <blockquote class="blockquote">. Bootstrap adds a .blockquote-footer class for the attribution line, which automatically prefixes an em-dash and renders the source name in a lighter, smaller style.

<blockquote class="blockquote">
  <p class="mb-0">The Ridgeline Loop views alone are worth the climb.</p>
  <footer class="blockquote-footer">
    Priya S., <cite title="Source Title">TrailMap review</cite>
  </footer>
</blockquote>

6. Worked Example: TrailMap Homepage Hero

Putting it together: TrailMap's homepage hero pairs a .display-3 headline with a .lead paragraph, some muted supporting text, and a call-to-action button — the standard Bootstrap 4 recipe for a page-top hero section.

<div class="px-4 py-5 text-center">
  <h1 class="display-3 font-weight-bold">Find your next trail</h1>
  <p class="lead mb-3">
    TrailMap has real, ranked reports from hikers near you — distance, difficulty
    and current conditions for every trail, updated weekly.
  </p>
  <p>
    <small class="text-muted">Over 4,200 trails mapped across 38 states</small>
  </p>
  <a href="#" class="btn btn-primary btn-lg">Browse trails</a>
</div>