Typography
1. Lesson Overview
(1) Prerequisites
- Master the differences and selection of three container types (from Lesson 2).
- Understand the responsive width changes of
.container.
(2) 🎯 What You Will Learn
- Master Bootstrap's heading system (
h1~h6) and display headings. - Learn to use
.leadfor guiding paragraphs and inline text elements. - Master text color utilities
.text-*and opacity control. - Proficiently use text alignment, transformation, and font size utility classes.
- Independently create a complete blog post layout.
(3) Pain Points
Charlie has just taken over a blog project that requires consistent heading styles and paragraph spacing across different pages. If using pure CSS, he would need to write selectors for each page and worry about priority conflicts.
(4) Solution
Bootstrap's typography classes make this simple. Bootstrap provides a complete set of typography styles—from font sizes to line height, from text colors to spacing—all pre-configured; you simply use the appropriate classes.
Understanding: Bootstrap Typography is like Word's Styles pane—select "Heading 1", and the text automatically becomes bold and larger without manually adjusting font size or line spacing.
(5) Benefits
By adding corresponding typography classes in HTML, Charlie can maintain consistent heading styles and paragraph spacing across all blog pages without writing any custom CSS code.
2. Headings
▶ Example: Headings and Display Headings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Typography</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container py-4">
<!-- Standard headings -->
<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>
<hr>
<!-- Heading classes on any element -->
<p class="h1">This paragraph looks like an h1</p>
<p class="h2">This paragraph looks like an h2</p>
<p class="h3">This paragraph looks like an h3</p>
<hr>
<!-- Display headings (extra-large) -->
<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</div>
</body>
</html>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
(1) Default Font Sizes
| Level | Tag/Class | Font Size | Weight |
|---|---|---|---|
h1 |
<h1> |
2.5rem (40px) | 500 |
h2 |
<h2> |
2rem (32px) | 500 |
h3 |
<h3> |
1.75rem (28px) | 500 |
h4 |
<h4> |
1.5rem (24px) | 500 |
h5 |
<h5> |
1.25rem (20px) | 500 |
h6 |
<h6> |
1rem (16px) | 500 |
3. Display Headings
display-1 ~ display-6 are larger and thinner (font-weight: 300) than standard headings, suitable for homepage titles, brand slogans, and other areas requiring visual impact:
<h1 class="display-3">Build <span class="text-primary">fast</span> with Bootstrap</h1>
<p class="lead">A powerful, feature-packed frontend toolkit.</p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
| Class | Font Size | Weight | Application Scenario |
|---|---|---|---|
display-1 |
5rem | 300 | Homepage Hero Title |
display-3 |
4rem | 300 | Landing Page Title |
display-6 |
2.5rem | 300 | Inner Page Banner |
(2) Comparison of All Display Headings
| Class | Font Size | Line Height | font-weight | Application Scenario |
|---|---|---|---|---|
display-1 |
5rem (80px) | 1.2 | 300 (Light) | Homepage Hero Title |
display-2 |
4.5rem (72px) | 1.2 | 300 (Light) | Landing Page Main Title |
display-3 |
4rem (64px) | 1.2 | 300 (Light) | Brand Slogan |
display-4 |
3.5rem (56px) | 1.2 | 300 (Light) | Event Page Title |
display-5 |
3rem (48px) | 1.2 | 300 (Light) | Inner Page Banner |
display-6 |
2.5rem (40px) | 1.2 | 300 (Light) | Section Title |
graph TD
A[Bootstrap Typography System] --> B[Headings h1~h6]
A --> C[Display Headings display-1~6]
A --> D[Lead Paragraphs .lead]
A --> E[Inline Elements]
A --> F[Utility Classes]
B --> G[Standard Heading Tags]
B --> H[class h1 Simulating Headings]
E --> I[mark / del / ins / small]
E --> J[strong / em / u / s]
F --> K[Text Colors text-*]
F --> L[Text Alignment text-start/center/end]
F --> M[Text Transformation uppercase/lowercase/capitalize]
F --> N[Font Size fs-1~fs-6]
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
4. Lead Paragraphs
.lead makes paragraphs larger and more prominent, suitable for article introductions or emphasized text:
<p>This is a normal paragraph with default font size (1rem).</p>
<p class="lead">This is a lead paragraph. It stands out from regular content with larger font and lighter weight.</p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
5. Inline Text Elements
Bootstrap resets styles for common HTML inline tags, ready to use out of the box:
<p>You can <mark>highlight</mark> text with the mark tag.</p>
<p><del>This line is deleted text.</del></p>
<p><s>This line is no longer accurate.</s></p>
<p><ins>This line is newly inserted.</ins></p>
<p><u>This line is underlined.</u></p>
<p><small>This line is small text.</small></p>
<p><strong>This line is bold.</strong></p>
<p><em>This line is italic.</em></p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
| Tag | Effect | Usage |
|---|---|---|
<mark> |
Yellow background highlight | Keywords / Search Results |
<del> |
Strikethrough | Deleted Content |
<ins> |
Underline (typically green) | New Content |
<small> |
Small text 0.875em | Annotations / Footnotes |
<strong> |
Bold | Keyword Emphasis |
6. Text Colors
▶ Example: Text Colors
<p class="text-primary">.text-primary - Primary blue</p>
<p class="text-success">.text-success - Success green</p>
<p class="text-danger">.text-danger - Danger red</p>
<p class="text-warning bg-dark p-2">.text-warning - Warning amber</p>
<p class="text-info bg-dark p-2">.text-info - Info cyan</p>
<p class="text-muted">.text-muted - Muted gray</p>
<p class="text-dark">.text-dark - Dark text</p>
<p class="text-body">.text-body - Default body color</p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
Text Opacity (Bootstrap 5.3):
<p class="text-primary">100% opacity</p>
<p class="text-primary text-opacity-75">75% opacity</p>
<p class="text-primary text-opacity-50">50% opacity</p>
<p class="text-primary text-opacity-25">25% opacity</p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
7. Text Alignment
<p class="text-start">Left aligned on all viewports.</p>
<p class="text-center">Center aligned on all viewports.</p>
<p class="text-end">Right aligned on all viewpoints.</p>
<p class="text-sm-end">Right aligned on sm+ viewports.</p>
<p class="text-md-center">Center aligned on md+ viewports.</p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
Breakpoint suffixes sm/md/lg/xl/xxl are equally effective in text alignment.
8. Text Transformation & Font Size
<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">Uppercased Text</p>
<p class="text-capitalize">capitalized text</p>
<p class="fs-1">fs-1 - font-size: 2.5rem</p>
<p class="fs-2">fs-2 - font-size: 2rem</p>
<p class="fs-3">fs-3 - font-size: 1.75rem</p>
<p class="fs-4">fs-4 - font-size: 1.5rem</p>
<p class="fs-5">fs-5 - font-size: 1.25rem</p>
<p class="fs-6">fs-6 - font-size: 1rem</p>
Output: Bootstrap 5.3 styled components (such as buttons, cards, carousels, collapses) with the page defaulting to Bootstrap's default theme (light mode) and responsive grid.
| Class | CSS Property | Equivalent |
|---|---|---|
text-lowercase |
text-transform: lowercase |
All |
