Bootstrap 5 Typography Classes

1. Headings

Bootstrap provides classes to style any element as a heading:

• .h1 — styles text like <h1>

• .h2 — styles text like <h2>

• .h3

• .h4

• .h5

• .h6

Example:

---

2. Display Headings

Extra-large headings for hero sections or big titles:

• .display-1 (largest)

• .display-2

• .display-3

• .display-4 (smallest)

Example:

---

3. Lead Paragraph

A paragraph with slightly larger font-size and lighter weight:

• .lead

Example:

---

4. Inline Text Elements

• .mark — Highlights text (yellow background)

• .small — Smaller text

• .text-muted — Muted (gray) text color

• .initialism — Smaller text for abbreviations (e.g., NASA)

• .blockquote — Styles for blockquotes (see also .blockquote-footer)

• .blockquote-footer — Citation text in blockquote

Example:

---

5. Text Alignment

• .text-start — Align left (default in LTR)

• .text-center — Center text

• .text-end — Align right (default in LTR)

Responsive versions (apply at specific breakpoints):

• .text-sm-start, .text-md-center, .text-lg-end, etc.

Example:

---

6. Text Wrapping & Truncation

• .text-wrap — Allow text wrap (default)

• .text-nowrap — Prevent text wrapping (no line breaks)

• .text-truncate — Truncate text with ellipsis when overflowing container

Example:

---

7. Text Transformation

• .text-lowercase — Lowercase all letters

• .text-uppercase — Uppercase all letters

• .text-capitalize — Capitalize first letter of each word

Example:

---

8. Font Weight & Italics

• .fw-light — Light font weight

• .fw-normal — Normal font weight (default)

• .fw-bold — Bold font weight

• .fst-italic — Italic text

• .fst-normal — Normal (not italic)

Example:

---

9. Text Color

Text color utilities you can combine with typography classes:

• .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted, .text-white

Example:

---

10. Monospace Font

• .font-monospace

Example:

---

Summary Table