Bootstrap Typography
Bootstrap sets global typography defaults through Reboot and adds utility classes for headings, emphasis, alignment, and text styling. This lesson covers the essentials.
Bootstrap Typography Overview
Reboot gives headings, paragraphs, and inline text elements consistent baseline styling across browsers. On top of that, Bootstrap provides display heading classes for oversized marketing headlines, a .lead class for introductory paragraphs, and utilities for font weight, style, and text transformation.
Text alignment and wrapping utilities let you control layout without custom CSS, and they respond to breakpoints just like grid classes, so text-md-start can align text differently on larger screens than on mobile.
| Concept | Description | Common Usage |
| Display headings | display-1 through display-6 for large headlines | Hero sections, marketing pages |
| Lead text | .lead for larger introductory paragraphs | Standout intro text below a heading |
| Font weight/style | fw-bold, fw-normal, fst-italic utilities | Emphasis without custom CSS |
| Text alignment | text-start, text-center, text-end | Aligning text responsively |
| Text transform | text-uppercase, text-lowercase, text-capitalize | Consistent casing for labels or headings |
Bootstrap Typography Example
<h1 class="display-4 fw-bold">Build Faster with Bootstrap</h1>
<p class="lead">A short, larger introductory paragraph below the headline.</p>
<p class="text-center text-md-start">
This text centers on small screens and left-aligns from md upward.
</p>
<p class="fw-semibold fst-italic text-uppercase">
Emphasized label text
</p>
The display-4 class produces a large, marketing-style headline distinct from the default h1 styling. The lead class enlarges and lightens the introductory paragraph. The text alignment example demonstrates responsive alignment, while the final paragraph combines weight, style, and transform utilities for a stylized label.
Top 10 Bootstrap Typography Examples
These are the typography utilities you'll reach for most often when styling text content.
| # | Example | Syntax |
| 1 | Display heading | <h1 class="display-3">Big Headline</h1> |
| 2 | Lead paragraph | <p class="lead">Intro text</p> |
| 3 | Bold text | <span class="fw-bold">Bold</span> |
| 4 | Italic text | <span class="fst-italic">Italic</span> |
| 5 | Centered text | <p class="text-center">Centered</p> |
| 6 | Uppercase text | <span class="text-uppercase">shout</span> |
| 7 | Muted small text | <small class="text-muted">Helper text</small> |
| 8 | Text truncation | <p class="text-truncate" style="max-width: 200px;">Long text...</p> |
| 9 | Blockquote | <blockquote class="blockquote">Quoted text</blockquote> |
| 10 | List unstyled | <ul class="list-unstyled"><li>Item</li></ul> |
Popular Real-World Bootstrap Typography Examples
These typography combinations are common across hero sections, articles, and UI labels.
| Scenario | Pattern |
| Hero headline with subtext | <h1 class="display-4 fw-bold">Title</h1><p class="lead">Subtitle</p> |
| Article byline | <p class="text-muted small">By Author • 5 min read</p> |
| Section eyebrow label | <span class="text-uppercase fw-semibold text-primary">New</span> |
| Pull quote in an article | <blockquote class="blockquote fs-4 fst-italic">"Quote text"</blockquote> |
| Truncated card title | <h5 class="text-truncate">Very long card title text</h5> |
| Centered mobile, left desktop headline | <h2 class="text-center text-lg-start">Heading</h2> |
| Form field helper text | <div class="form-text">We never share your email.</div> |
| Monospace code label | <code class="text-danger">Error: not found</code> |
Best Practices
- Use semantic heading tags (h1-h6) and adjust visual size with display-* or fs-* utilities instead of skipping heading levels.
- Reserve display headings for hero sections; they're too large for regular body headings.
- Use .lead sparingly, typically once per page or section, for the strongest visual hierarchy.
- Prefer text utility classes over inline style attributes for font weight and alignment.
- Combine text-muted with small for secondary or supporting text.
- Use responsive text alignment utilities when a design changes alignment across breakpoints.
- Keep text-truncate paired with a defined width or flex constraint so ellipsis behaves correctly.
Common Mistakes
- Using display-1 for regular headings, making body copy visually overwhelming.
- Skipping heading levels (h1 straight to h4) purely to get a smaller visual size.
- Applying text-truncate without a max-width or flex-basis, so it has no effect.
- Overusing text-uppercase on long sentences, which hurts readability.
- Mixing fw-bold with <strong> unnecessarily when only one is needed.
- Forgetting text alignment utilities are responsive and need a breakpoint infix to change per screen size.
Key Takeaways
- Bootstrap typography combines Reboot defaults with utility classes for size, weight, and alignment.
- Display headings (display-1 to display-6) are for large marketing headlines.
- .lead enlarges introductory paragraphs for emphasis.
- Text alignment, transform, and weight utilities remove the need for most custom text CSS.
- Responsive text utilities let alignment and sizing adapt across breakpoints.
Pro Tip
Use fs-1 through fs-6 utility classes when you need heading-like sizing on a non-heading element, keeping your HTML semantically correct while still matching the visual scale.