Typography

Typography

Bootstrap 5 uses a default font stack based on the system fonts of each device. You also get default styles for all HTML headings and paragraph elements.

Default headings

All HTML headings (<h1> to <h6>) are styled for you:

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

Display headings

Use the .display-* classes to make headings stand out more. They have a larger font-size and a lighter font-weight:

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

Smaller headings

The .h1 to .h6 classes apply heading styles to any element:

<p class="h1">Styled like an h1</p>

Mark and small

• .mark highlights text like a marker.
• .small makes text smaller.
• <mark> and <small> elements get these styles automatically.

<p>This text has <mark>highlighted</mark> parts.</p>

Lead

The .lead class makes a paragraph stand out by increasing its size and weight:

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

Text utilities

• .text-start left align
• .text-center center align
• .text-end right align
• .text-uppercase uppercase
• .text-lowercase lowercase
• .text-capitalize capitalize

TL;DR

• Headings h1 to h6 are pre-styled.
• .display-1 to .display-4 create bigger headings.
• .lead makes paragraphs stand out.
• Text alignment and case utilities exist as classes.