Typography Utilities

Bootstrap resets and restyles default HTML typography (headings, paragraphs, lists) to a consistent baseline, then gives you utility classes to adjust individual pieces of text without writing CSS.

Headings and display text

Standard <h1>–<h6> tags are already styled by Bootstrap, but for a hero section you often want something even bigger. .display-* classes provide larger, lighter-weight headings meant to stand out:

<h1 class="display-4">Build faster with Bootstrap</h1>
<p class="lead">
  A responsive framework for building sites without writing CSS from scratch.
</p>

.display-1 through .display-6 scale from largest to smallest. .lead is a separate class for a paragraph that introduces a page — slightly larger and lighter than normal body text, commonly paired with a .display-* heading right above it.

Font weight and style

<p class="fw-bold">This text is bold.</p>
<p class="fw-normal">This text is normal weight.</p>
<p class="fst-italic">This text is italic.</p>
<p class="text-decoration-underline">This text is underlined.</p>

These classes exist so you don't reach for inline style attributes or a one-off CSS rule every time you need to bold a single word or phrase — fw-bold, fst-italic, and similar utilities cover the common cases directly in your markup.

Alignment and transformation

<p class="text-center">Centered text</p>
<p class="text-end">Right-aligned text</p>
<p class="text-uppercase">shouted at full volume</p>
<p class="text-truncate" style="max-width: 200px;">
  This sentence is much longer than the box it's inside of.
</p>

text-truncate is worth calling out: it cuts off overflowing text with an ellipsis (…) instead of letting it wrap or spill out of its container — useful for things like a filename or a card title that might be arbitrarily long, but it requires the element to also have display: inline-block or display: block and a defined width to actually take effect, which is why it's commonly paired with the sizing utilities from the next lesson.

Text color

<p class="text-primary">Primary brand color</p>
<p class="text-danger">Something went wrong.</p>
<p class="text-muted">Secondary, de-emphasized text.</p>

These map to Bootstrap's theme colors (primary, secondary, success, danger, warning, info, light, dark) — the same palette used for buttons, alerts, and badges throughout the framework, which is exactly the point: using text-danger for an error message and btn-danger for a destructive button keeps the meaning of "danger" visually consistent across your whole site, rather than each developer picking their own red.

Responsive alignment

Like grid columns, text-alignment classes accept a breakpoint infix:

<p class="text-center text-md-start">
  Centered on phones, left-aligned from tablets up.
</p>

This mirrors the mobile-first pattern from the breakpoints lesson — the base class applies everywhere, and the infixed version only takes over once the viewport reaches that width.