Prev Next

BS5 Typography

Bootstrap 5 includes numerous typography utility classes to quickly style headings, paragraphs, and other text elements. This helps maintain consistency across your site.

Key Topics

Headings & Display Headings

Besides default HTML headings (h1–h6), Bootstrap offers display headings for visually larger text.

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3 class="display-3">Display 3</h3>
<h4 class="display-4">Display 4</h4>

Explanation: display-1 through display-6 are special classes for extra-large headings, useful for hero sections or key titles.

Paragraphs & Lead

Bootstrap’s .lead class makes paragraphs larger for emphasis. Standard paragraph tags work as usual.

<p>This is a normal paragraph.</p>
<p class="lead">This paragraph is styled with the .lead class for extra emphasis.</p>

Explanation: Lead paragraphs stand out on the page with larger font size and increased line-height, ideal for introductory text.

Key Takeaways

  • Use heading tags (h1–h6) alongside .display-* classes for emphasis.
  • The .lead class is perfect for highlighting critical paragraphs.
  • Other text utilities (e.g., .text-muted, .fw-bold) further expand typography styling.
Prev Next