BS5 Typography

Typography in Bootstrap 5

Bootstrap includes typography defaults and utility classes for controlling font size, alignment, weight, spacing, and readability.

Headings

Use normal HTML headings and enhance them with Bootstrap classes when needed.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Display headings

Use display classes for large hero-style text.

<h1 class="display-4">Big Title</h1>

Lead text

<p class="lead">This paragraph stands out.</p>

Text alignment

<p class="text-start">Left</p>
<p class="text-center">Center</p>
<p class="text-end">Right</p>

Responsive alignment

<p class="text-center text-md-start">Center on mobile, left on md+</p>

Font weight and style

<p class="fw-bold">Bold</p>
<p class="fw-semibold">Semi-bold</p>
<p class="fw-normal">Normal</p>
<p class="fst-italic">Italic</p>

Text transform

<p class="text-uppercase">Uppercase</p>
<p class="text-lowercase">Lowercase</p>
<p class="text-capitalize">Capitalize</p>

Line height

<p class="lh-1">Tight</p>
<p class="lh-sm">Small</p>
<p class="lh-base">Base</p>
<p class="lh-lg">Large</p>

Truncation

<div class="text-truncate" style="max-width: 220px;">A very long text that will truncate...</div>

Best practices

• Use lead for intros and summaries
• Use responsive alignment sparingly
• Prefer readable line height for long content
• Use utility classes instead of custom CSS when possible