Bootstrap Typography and Text Utilities: Cheat Sheet

Bootstrap’s typography covers two things: the default styles for headings, paragraphs, lists, and quotes, and a set of text utilities for size, weight, alignment, color, wrapping, and decoration. This guide is a reference for both, with the class names, the default sizes, and the common jobs: making text bold, centering it, cutting it off with an ellipsis, and changing sizes responsively. To change the font itself, see how to change Bootstrap 5 fonts. Everything is for Bootstrap 5.3.

Text utility cheat sheet

Job	Classes
Font size	fs-1 (largest) to fs-6 (smallest)
Bold and weight	fw-bold, fw-bolder, fw-semibold, fw-medium, fw-normal, fw-light, fw-lighter
Italic	fst-italic, fst-normal
Alignment	text-start, text-center, text-end, and text-md-center style responsive versions
Case	text-uppercase, text-lowercase, text-capitalize
Wrapping	text-wrap, text-nowrap, text-break, text-truncate
Decoration	text-decoration-underline, text-decoration-line-through, text-decoration-none
Line height	lh-1, lh-sm, lh-base, lh-lg
Monospace	font-monospace
Color	text-primary, text-body-secondary, text-body-emphasis, and the other theme colors
Transparency	text-opacity-75, -50, -25 with a text-* color
Big intro text	lead
Hero headings	display-1 to display-6

Headings

<h1> to <h6> get these sizes by default:

Heading	Size	Class with the same look
<h1>	2.5rem (40px)	h1, fs-1
<h2>	2rem (32px)	h2, fs-2
<h3>	1.75rem (28px)	h3, fs-3
<h4>	1.5rem (24px)	h4, fs-4
<h5>	1.25rem (20px)	h5, fs-5
<h6>	1rem (16px)	h6, fs-6

Headings use weight 500 and a line height of 1.2. The large sizes shrink automatically on small screens, thanks to Bootstrap’s responsive font sizes (RFS): an <h1> is 2.5rem on desktops and smaller on phones, with no extra classes.

Choose the heading level for the page structure, and the look with a class. If a section needs an <h2> for screen readers and search engines but should look smaller, write <h2 class="h4">. Use fs-* to resize any other element, such as <p class="fs-5">.

For a secondary part of a heading, use <small> with a muted color:

<h2>Release notes <small class="text-body-secondary">v2.4</small></h2>

Display headings

For hero sections that need bigger text than <h1>:

<h1 class="display-4">Build faster with Bootstrap</h1>
<p class="lead">Design a theme visually, then export Sass or CSS.</p>

Class	Size
display-1	5rem
display-2	4.5rem
display-3	4rem
display-4	3.5rem
display-5	3rem
display-6	2.5rem

Display headings are lighter (weight 300) and also shrink on small screens. lead makes a paragraph 1.25rem and light, for the sentence under a hero heading.

Bold, italic, and weights

<p class="fw-bold">Bold text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-light">Light text</p>
<p class="fst-italic">Italic text</p>

A weight only shows if the font has it. The default system fonts have most weights; a web font loaded with only 400 and 700 will show fw-semibold as bold. Use <strong> and <em> when the emphasis carries meaning, and the classes when it’s only visual.

Alignment

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

Text alignment centers the text inside a block. To center the block itself, see how to center a div in Bootstrap.

Wrapping and truncating

<div class="text-nowrap">Never wraps onto a second line</div>
<div class="text-truncate" style="max-width: 240px;">Long text that ends with an ellipsis when it doesn't fit</div>
<p class="text-break">Breaks long words like https://example.com/a-very-long-url-without-spaces</p>

text-truncate needs a width limit and a block or inline-block element. For an ellipsis after several lines rather than one, use the CSS line-clamp property:

.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

Text colors

<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-body-secondary">Muted secondary text</p>
<p class="text-body-emphasis">Higher-contrast text</p>
<p class="text-primary text-opacity-50">Half-transparent primary</p>

text-body-secondary replaced the older text-muted, which still works but is deprecated in Bootstrap 5.3. The body colors adapt in dark mode. Light colors such as text-warning and text-info are hard to read on white, so save them for icons or dark backgrounds. The full color system is in how to customize Bootstrap 5 colors.

Links

Bootstrap 5.3 has link utilities for underline color, offset, and transparency:

<a href="#" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Subtle underline</a>
<a href="#" class="link-body-emphasis text-decoration-none">No underline</a>

Lists

<ul class="list-unstyled">
  <li>No bullets or left padding</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">HTML</li>
  <li class="list-inline-item">CSS</li>
  <li class="list-inline-item">JavaScript</li>
</ul>

list-unstyled removes bullets from the list but not from nested lists. list-inline puts items on one line, which suits tags or footer links.

Quotes, marks, and abbreviations

<figure>
  <blockquote class="blockquote">
    <p>We shipped our redesign in a week.</p>
  </blockquote>
  <figcaption class="blockquote-footer">Ana Lopez, <cite title="Acme">Acme</cite></figcaption>
</figure>

<p>Search for <mark>highlighted</mark> words.</p>
<p><abbr title="Cascading Style Sheets" class="initialism">CSS</abbr> is easy.</p>

initialism makes an abbreviation slightly smaller. <small> text is 0.875em of its parent.

Responsive font sizes

Bootstrap’s RFS already scales large headings down on small screens. For your own sizes, use the fs-* classes, which also scale, or write CSS with clamp():

.hero-title { font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); }

Or use the RFS mixin in Sass: .hero-title { @include font-size(3.5rem); }.

Change the defaults in Sass

Variable	Default
$font-family-sans-serif	The system font stack
$font-size-base	1rem
$h1-font-size	$font-size-base * 2.5
$headings-font-weight	500
$headings-line-height	1.2
$display-font-sizes	5rem to 2.5rem
$display-font-weight	300
$lead-font-size	$font-size-base * 1.25
$line-height-base	1.5

Set them before importing Bootstrap; see Bootstrap Sass variables explained. To pick fonts and a type scale visually, use the bootstrap.build editor.

FAQ

How do I make text bold in Bootstrap 5?

Add the fw-bold class, for example <span class="fw-bold">. Other weights are fw-semibold, fw-medium, fw-normal, fw-light, and fw-bolder. Use <strong> when the bold text carries meaning.

How do I change the font size in Bootstrap?

Add fs-1 to fs-6 to an element, where fs-1 matches the <h1> size (2.5rem) and fs-6 is 1rem. To change the base size for the whole site, set $font-size-base in Sass.

How do I center text in Bootstrap?

Add text-center to the element or its parent. Use text-md-center and similar classes to center only from a breakpoint up.

What replaced text-muted in Bootstrap 5.3?

text-body-secondary. text-muted still works but is deprecated. text-body-secondary uses the theme’s secondary text color, which adapts in dark mode.

How do I truncate text with an ellipsis in Bootstrap?

Add text-truncate to an element with a set width, such as style="max-width: 240px". The text stays on one line and ends with an ellipsis. For several lines, use the CSS line-clamp property instead.