Typography

Bootstrap 3 restyles the browser's default type with its own scale: bigger, bolder headings than plain HTML gives you, a .lead class for intro paragraphs, muted and contextual text colors, and a properly styled <blockquote>. All of it is plain CSS on top of the base 14px body font — nothing on this page needs JavaScript.

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

Bootstrap 3's base font size is 14px, and every heading is a fixed multiple of it. If you need a heading-sized look on an element that isn't semantically a heading (a <span> or a <div>, say), the matching .h1-.h6 class gives you the exact same size, weight and margins.

<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>

2. Lead Paragraphs: .lead

Add .lead to a paragraph to make it stand out as an introduction — a 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. Small Text and Muted / Contextual Colors

The native <small> element is automatically resized to about 85% of its parent's font size, which makes it useful for de-emphasized fine print inside a heading or paragraph. .text-muted greys out any block of text, and the five contextual color classes — .text-primary, .text-success, .text-danger, .text-warning and .text-info — tint text to match the meaning of a message.

<h3>Ridgeline Loop <small>4.2 mi, moderate</small></h3>

<p class="text-muted">Last surveyed 3 weeks ago.</p>
<p class="text-success">Trail open and in good condition.</p>
<p class="text-danger">Bridge washed out — trail closed.</p>
<p class="text-warning">Bear activity reported nearby.</p>
<p class="text-info">Parking lot resurfacing this weekend.</p>

4. Blockquotes

Wrap a quotation in <blockquote> for a larger font size and a left border. A <small> line inside it is the conventional place for an attribution, and adding .blockquote-reverse flips the whole thing to right-aligned text with the border on the right — handy when a quote sits next to right-aligned content.

<blockquote>
  <p>The Ridgeline Loop views alone are worth the climb.</p>
  <small>Priya S., TrailMap review</small>
</blockquote>

<!-- Right-aligned variant -->
<blockquote class="blockquote-reverse">
  <p>Bring more water than you think you need.</p>
  <small>Dev M., trail comment</small>
</blockquote>

5. Worked Example: TrailMap Homepage Hero

Putting it together: TrailMap's homepage hero pairs a large <h1> with a .lead paragraph and a muted supporting line — the standard Bootstrap 3 recipe for a page-top hero section, no display classes required since a plain h1 is already 36px.

<div class="text-center" style="padding:40px 0">
  <h1>Find your next trail</h1>
  <p class="lead">
    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>