Bootstrap 5 Typography Tutorial — Headings, Text and Font Utilities

Typography is the foundation of readable interfaces. Bootstrap 5 has a comprehensive set of utilities for controlling every aspect of text — headings, size, weight, line height, alignment and truncation.

Headings

Standard HTML headings get Bootstrap's default styles automatically:

<h1>h1 heading — 2.5rem</h1>
<h2>h2 heading — 2rem</h2>
<h3>h3 heading — 1.75rem</h3>
<h4>h4 heading — 1.5rem</h4>
<h5>h5 heading — 1.25rem</h5>
<h6>h6 heading — 1rem</h6>

Use heading classes to apply visual heading styles to any element:

<!-- p styled to look like h1 -->
<p class="h1">Looks like h1</p>

<!-- span styled to look like h4 -->
<span class="h4">Looks like h4</span>

Useful when SEO or accessibility requires a different tag than the visual design.

Display Headings

For hero sections and large callout text — bigger and lighter than regular headings:

<h1 class="display-1">Display 1</h1>  <!-- ~5rem -->
<h1 class="display-2">Display 2</h1>  <!-- ~4.5rem -->
<h1 class="display-3">Display 3</h1>  <!-- ~4rem -->
<h1 class="display-4">Display 4</h1>  <!-- ~3.5rem -->
<h1 class="display-5">Display 5</h1>  <!-- ~3rem -->
<h1 class="display-6">Display 6</h1>  <!-- ~2.5rem -->

Display headings use font-weight: 300 by default — lighter than regular headings. Combine with fw-bold to override:

<h1 class="display-4 fw-bold">Bold display heading</h1>

Lead Text

A slightly larger, lighter paragraph for introductions and subtitles:

<p class="lead">
  This paragraph stands out slightly with a larger font size and lighter weight.
  Use it for the first paragraph in a section or as a page subtitle.
</p>

Inline Text Elements

<mark>Highlighted text</mark>
<del>Deleted/strikethrough text</del>
<s>No longer accurate text</s>
<ins>Inserted text (underlined)</ins>
<u>Underlined text</u>
<small>Small fine print text</small>
<strong>Bold important text</strong>
<em>Italic emphasized text</em>
<abbr title="HyperText Markup Language">HTML</abbr>

Font Weight and Style

<p class="fw-bold">Bold — 700</p>
<p class="fw-bolder">Bolder — relative to parent</p>
<p class="fw-semibold">Semibold — 600</p>
<p class="fw-medium">Medium — 500</p>
<p class="fw-normal">Normal — 400 (default)</p>
<p class="fw-light">Light — 300</p>
<p class="fw-lighter">Lighter — relative to parent</p>
<p class="fst-italic">Italic</p>
<p class="fst-normal">Normal style</p>

Font Size

<p class="fs-1">Font size 1 — 2.5rem (matches h1)</p>
<p class="fs-2">Font size 2 — 2rem</p>
<p class="fs-3">Font size 3 — 1.75rem</p>
<p class="fs-4">Font size 4 — 1.5rem</p>
<p class="fs-5">Font size 5 — 1.25rem</p>
<p class="fs-6">Font size 6 — 1rem (default body)</p>

Use small class or the <small> element for smaller text:

<p class="small">Smaller text — 0.875em of parent</p>

Text Alignment

<p class="text-start">Left aligned (default)</p>
<p class="text-center">Centered</p>
<p class="text-end">Right aligned</p>

<!-- Responsive alignment -->
<p class="text-center text-md-start">Centered on mobile, left on desktop</p>
<p class="text-start text-lg-center">Left on mobile, centered on desktop</p>

Text Transform

<p class="text-lowercase">ALL CAPS BECOMES lowercase</p>
<p class="text-uppercase">lowercase becomes uppercase</p>
<p class="text-capitalize">each word Gets Capitalized</p>

Text Decoration

<a href="#" class="text-decoration-none">Link without underline</a>
<span class="text-decoration-underline">Underlined text</span>
<span class="text-decoration-line-through">Strikethrough</span>

Line Height

<p class="lh-1">Line height 1 (tight, no spacing)</p>
<p class="lh-sm">Line height small — 1.25</p>
<p class="lh-base">Line height base — 1.5 (default)</p>
<p class="lh-lg">Line height large — 2</p>

Text Wrapping and Overflow

<!-- Prevent wrapping -->
<span class="text-nowrap">This text will not wrap to the next line</span>

<!-- Truncate with ellipsis -->
<div class="text-truncate" style="max-width:200px;">
  This very long text will be truncated with an ellipsis at the end
</div>

<!-- Word break for long unbreakable strings -->
<p class="text-break">
  VeryLongURLOrStringThatWouldOverflowWithoutBreaking/some/long/path/here
</p>

Monospace Font

<code class="font-monospace">npm install bootstrap</code>
<p class="font-monospace">Monospace paragraph</p>

Letter Spacing and Tabular Numbers

Bootstrap 5 doesn't have built-in letter-spacing utilities but you can use inline styles or custom CSS:

<!-- Badge or label with tracked caps -->
<span class="text-uppercase fw-semibold text-muted small"
  style="letter-spacing:0.08em;">Category Label</span>

<!-- Numbers that align in columns (tabular figures) -->
<td style="font-variant-numeric: tabular-nums;">$1,240.50</td>

Blockquote

<figure>
  <blockquote class="blockquote">
    <p>Best Angular + Bootstrap template I've used. Dark mode works perfectly.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Rahul Kumar, <cite>LettStartDesign customer</cite>
  </figcaption>
</figure>

List Styles

<!-- Unstyled list (removes bullets and padding) -->
<ul class="list-unstyled">
  <li>No bullet point</li>
  <li>No padding</li>
</ul>

<!-- Inline list (horizontal) -->
<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">·</li>
  <li class="list-inline-item">About</li>
  <li class="list-inline-item">·</li>
  <li class="list-inline-item">Contact</li>
</ul>

Changing the Base Font

Override Bootstrap's default system font stack using CSS variables (no Sass needed):

<style>
  /* Import from Google Fonts */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  /* Override Bootstrap's font variable */
  :root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
    --bs-body-font-size: 0.9375rem; /* 15px instead of 16px */
    --bs-body-line-height: 1.6;
  }
</style>

Or with Sass for full control:

$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 0.9375rem;
$line-height-base: 1.6;

@import "bootstrap/scss/bootstrap";

Both approaches apply the custom font to all Bootstrap components automatically. Inter is my recommendation for admin dashboards — it's purpose-built for UI and very readable at small sizes.