back to course
Lesson 05 / 5010%· free preview
Bootstrap 5 Basics5/32
BS5 Typography
Pre-styled headings, display headings, leads, marks, blockquotes, and helpers like text-muted / text-primary.
Headings & display headings
<h1> to <h6> look like W3Schools defaults. For oversized hero text use display headings:
html<h1 class="display-1">Display 1</h1> <h1 class="display-4">Display 4</h1>
Useful text utilities
| Class | Effect |
|---|---|
.lead | Larger paragraph (intro text) |
.text-muted | Soft gray |
.text-primary / -success / -danger | Brand colors |
.text-center / -end / -start | Alignment |
.text-truncate | Single-line ellipsis |
.text-uppercase / -lowercase / -capitalize | Case |
.fw-bold / -light / -normal | Font weight |
.fst-italic / -normal | Style |
.text-decoration-line-through / -underline / -none | Decoration |
Key Takeaways
- Headings:
.h1to.h6(CSS-only, doesn't change HTML semantics) - Display:
.display-1to.display-6for large hero headings - Lead:
.leadfor emphasised opening paragraphs - Inline:
.text-muted,.fw-bold,.fst-italic,.text-decoration-underline
Interview Questions
Practice Questions
- Use
.display-1for a hero headline. - Apply
.leadto an opening paragraph. - Make a paragraph
.text-muted .fst-italic.
Pro Tips
- Customise font in Sass:
$font-family-base: 'Inter', sans-serif;. - For body text use 16-18px — anything smaller loses readability on mobile.
AI-powered recap
Quick recap quiz?
We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.
Ready to move on?
// example library
Want more hands-on snippets in Bootstrap?
Browse 1 runnable example · across 1 chapter · short, copy-paste-friendly · grouped by topic
// interactive playground
Visualize this concept in the DSA Visualizer
Run arrays · stacks · queues · linked lists · trees · heaps · hash tables — step-by-step animated walk-throughs.
// feedback.matters()
Did this lesson help you?