Nearby lessons
5 of 39📝 BS5 Typography
📌 What Are Bootstrap 5 Typography Utilities?
Bootstrap provides typography utilities for headings, text styling, alignment, and more. Use semantic HTML (<h1>–<h6>) plus Bootstrap classes like .display-*, .lead, .text-*, .fw-*, and .fs-*.
📝 Headings (h1-h6)
Use standard HTML headings <h1> through <h6>. Bootstrap styles them automatically. h1 is largest, h6 is smallest. Use one h1 per page.
📐 Display Headings (.display-1 to .display-6)
.display-1 through .display-6 – larger, lighter headings for hero sections. Use on <h1> or other headings. .display-1 is largest, .display-6 is smallest.
📄 Lead Paragraph (.lead)
.lead – makes a paragraph stand out (larger font, more spacing). Use for introductory text or summaries.
📏 Text Alignment (.text-start, .text-center, .text-end)
.text-start – left-align. .text-center – center. .text-end – right-align. Responsive: .text-md-center, .text-lg-end, etc.
💪 Font Weight (.fw-bold, .fw-normal, .fw-light)
.fw-bold – bold. .fw-normal – normal weight. .fw-light – light. .fw-bolder – bolder than parent.
📐 Font Size (.fs-1 to .fs-6)
.fs-1 through .fs-6 – utility font sizes. .fs-1 is largest, .fs-6 is smallest. Use on any text element.
🔤 Text Transform (.text-uppercase, .text-lowercase, .text-capitalize)
.text-uppercase – all caps. .text-lowercase – all lowercase. .text-capitalize – capitalize first letter of each word.
✅ Typography Best Practices
- Use semantic headings (
<h1>–<h6>) for structure. - Use .lead for introductory paragraphs.
- Use .display-* for hero sections, not regular headings.