Typography
4 min read Quiz at the end
Apply display headings, lead text, fw-bold, text-truncate, text-uppercase, and text-muted.
Typography
<h1>Heading 1</h1> ... <h6>Heading 6</h6>
<!-- Display headings (bigger) -->
<h1 class="display-1">Display 1</h1> ... <h1 class="display-6"></h1>
<!-- Lead paragraph -->
<p class="lead">Larger, lighter text</p>
<!-- Inline elements -->
<mark>Highlighted</mark>
<del>Strikethrough</del>
<small class="text-muted">Small muted text</small>
<!-- Text utilities -->
<p class="text-start">Left</p>
<p class="text-center">Center</p>
<p class="text-end">Right</p>
<p class="text-truncate" style="max-width:200px">Long text...</p>
<p class="fw-bold">Bold</p>
<p class="fst-italic">Italic</p>
<p class="text-uppercase">Uppercase</p>
<p class="text-primary">Primary color</p>
<p class="text-muted">Muted</p>
Topic Quiz · 2 questions
Test your understanding before moving on
1. Which class makes heading-style text larger than h1?
💡 display-1 through display-6 create oversized display headings.
2. Which class truncates text with an ellipsis?
💡 text-truncate combines overflow:hidden text-overflow:ellipsis white-space:nowrap.