Day 3 - Typography

Master Bootstrap's typography classes for beautiful text styling.

1. Heading Styles

Apply heading styles to any element using .h1 to .h6 classes.

.h1 through .h6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Display Headings

Use .display-1 to .display-6 for larger, bolder headings:

.display-1 through .display-6

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

2. Text Styles

.lead

This is a lead paragraph. It stands out with larger font and lighter weight.

.small

Normal text and small text

.mark

Normal text with highlighted text

3. Font Weights & Styles

.fw-bold

Bold text

.fw-normal

Normal text

.fw-light

Light text

.fst-italic

Italic text

4. Text Decoration

.text-decoration-underline

Underlined text

.text-decoration-line-through

Strikethrough text

5. Text Alignment

.text-start

Left aligned text

.text-center

Center aligned text

.text-end

Right aligned text

6. Line Heights

.lh-1 (Tight)

This is a paragraph with tight line height. The lines are very close together.

.lh-sm (Small)

This is a paragraph with small line height. Slightly more space than tight.

.lh-base (Normal)

This is a paragraph with normal line height. The default spacing for readability.

.lh-lg (Large)

This is a paragraph with large line height. More space between lines.

Quick Reference

Category	Classes	Description
Headings	`.h1` - `.h6`	Apply heading styles to any element
Display	`.display-1` - `.display-6`	Larger, bolder headings
Text Styles	`.lead`, `.small`, `.mark`	Lead paragraph, small text, highlight
Font Weight	`.fw-bold`, `.fw-normal`, `.fw-light`	Text weight control
Font Style	`.fst-italic`	Italic text
Decoration	`.text-decoration-underline`, `.text-decoration-line-through`	Underline and strikethrough
Alignment	`.text-start`, `.text-center`, `.text-end`	Text alignment
Line Height	`.lh-1`, `.lh-sm`, `.lh-base`, `.lh-lg`	Line height control

< Previous: Setup | Next: Containers >