Bootstrap 5.3 Typography Patterns

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Heading Classes on Other Elements

Paragraph styled as h1

Paragraph styled as h3

Span styled as h4

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Customized Headings with Secondary Text

Fancy display heading With faded secondary text

Display heading Secondary text

Lead Paragraph

This is a lead paragraph. It stands out from regular paragraphs with larger font size and lighter weight.

This is a regular paragraph for comparison. Notice how the lead paragraph above has more visual prominence.

Inline Text Elements

Highlighted text using the mark element.

Deleted text using the del element.

Strikethrough text (no longer accurate) using the s element.

Inserted text using the ins element.

Underlined text using the u element.

Fine print using the small element.

Bold text using the strong element.

Italicized text using the em element.

Font Size Utilities

.fs-1 text (2.5rem)

.fs-2 text (2rem)

.fs-3 text (1.75rem)

.fs-4 text (1.5rem)

.fs-5 text (1.25rem)

.fs-6 text (1rem)

Font Weight and Style

Bold text (.fw-bold)

Bolder text (.fw-bolder)

Semibold text (.fw-semibold)

Medium text (.fw-medium)

Normal weight text (.fw-normal)

Light weight text (.fw-light)

Lighter text (.fw-lighter)

Italic text (.fst-italic)

Normal style text (.fst-normal)

Line Height

Line height 1 (.lh-1). This paragraph has very tight line spacing which can be useful for certain design situations.

Small line height (.lh-sm, 1.25). This paragraph has slightly reduced line spacing.

Base line height (.lh-base, 1.5). This is the default line height in Bootstrap.

Large line height (.lh-lg, 2). This paragraph has increased line spacing for better readability.

Text Alignment

Start aligned text (left in LTR).

Center aligned text.

End aligned text (right in LTR).

Responsive Alignment

Start on mobile, center on md, end on lg+

Text Transform

LOWERCASED TEXT (.text-lowercase)

uppercased text (.text-uppercase)

capitalized text (.text-capitalize)

Text Decoration

Underlined text

Line-through text

Link with no decoration

Text Wrapping and Overflow

This text will wrap normally within its container.

This text will not wrap and will overflow.

This very long text will be truncated with an ellipsis when it overflows.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Monospace Font

This text is in a monospace font family.

Text Reset

Muted text with a reset link that inherits the parent color.

Blockquotes

A well-known quote, contained in a blockquote element.

Center Aligned Blockquote

A centered blockquote.

Right Aligned Blockquote

A right-aligned blockquote.

Lists

Unstyled List

Inline List

Description List

Term
Definition for the term above.
Another term
Another definition with more detailed explanation.
Long term that wraps
Definition that aligns properly with the grid system.
Very long truncated term
Definition for truncated term.