Typography

This section documents Bootstrap 5.x as implemented by the official Bootstrap project. No specific patch version is pinned. Unlike the other reference sections on this site, no single reference book underpins it: the content was generated with the assistance of AI from general knowledge of Bootstrap, and should be verified against the current official documentation at getbootstrap.com/docs before relying on it in production.

This section’s bibliography lists the reference material consulted while preparing these pages.

Bootstrap’s typography sets a consistent base font stack, size scale, and line height on the raw HTML text elements (as part of Reboot), then layers a small set of classes on top for the cases the raw elements do not cover — oversized display headings, lead paragraphs, and general text utilities.

Headings

<h1> through <h6> are styled out of the box with a descending size scale, so plain semantic markup already looks reasonable with no classes at all:

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

The matching .h1-.h6 classes apply the same styling to a non-heading element — useful when the visual size needed does not match the semantically correct heading level for the document outline:

<p class="h3">This paragraph looks like an h3, but is still a &lt;p&gt; in the outline.</p>

Keep the semantic element (<h1>-<h6>) chosen for document structure and accessibility, and reach for the .h1-.h6 classes only when the visual size needs to diverge from that structural level — never the other way around.

Display headings

For a hero section or landing-page headline that needs to be larger and lighter-weight than even <h1>, Bootstrap ships six display sizes, .display-1 (largest) through .display-6 (smallest, but still larger than a normal <h1>):

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Display classes use a larger font-size and a lighter font-weight than the regular heading scale, and their size responds at wider breakpoints via clamp()-based fluid typography in recent Bootstrap 5 releases, rather than jumping discretely at each breakpoint.

Lead paragraphs

.lead makes a paragraph stand out from surrounding body text — larger font size and a lighter weight — commonly used for the introductory sentence under a heading:

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs with a larger font size
  and lighter font weight.
</p>

Inline text elements

The standard HTML inline elements for emphasis, marking, deletion, and small print are all restyled consistently by Reboot, so they need no extra class:

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Text utility classes

A larger set of single-purpose utility classes cover alignment, transformation, weight, and wrapping, and are meant to be combined freely on any element:

Class(es) Effect

.text-start / .text-center / .text-end

Horizontal text alignment (non-responsive)

.text-sm-center, .text-md-end, …​

Responsive alignment, following the same breakpoint infixes as the grid system

.text-lowercase / .text-uppercase / .text-capitalize

CSS text-transform

.fw-bold / .fw-semibold / .fw-normal / .fw-light

Font weight

.fst-italic / .fst-normal

Font style (italic vs. normal)

.text-decoration-underline / .text-decoration-line-through / .text-decoration-none

Text decoration — .text-decoration-none is frequently used to strip the default underline from an anchor styled to look like something other than a link

.text-wrap / .text-nowrap

Whether text is allowed to wrap onto multiple lines

.text-truncate

Truncates overflowing text with an ellipsis (requires the element to be display: inline-block or block with a constrained width)

.text-break

Forces long unbroken strings (URLs, tokens) to wrap rather than overflow their container

.text-muted

Reduced-emphasis grey text — see the note on color utility classes for the full color set

 
<p class="text-center text-uppercase fw-bold">Centered, uppercase, bold</p>
<p class="text-md-end text-nowrap">Right-aligned from md upward, never wraps</p>
<div class="text-truncate" style="max-width: 200px;">
  This sentence is too long to fit and will be truncated with an ellipsis.
</div>

Where typography fits with the rest of Bootstrap

The base font family, sizes, and line-height Bootstrap applies to headings and body text are Sass variables under the hood ($font-family-base, $h1-font-size, and so on) — see Customization for overriding them, and Reboot for the reset layer these styles build on top of. The color of any of this text can be changed independently with the same text color utility classes used elsewhere on the page.

See the official Typography documentation for the full class list, including the responsive-alignment and list-style utilities not covered above.