Skip to content

Bootstrap Typography Explained — Text and Headings

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Typography Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap provides comprehensive typography styling with heading classes, display headings, lead paragraphs, inline text elements, blockquotes, and responsive text utilities.

What You'll Learn

  • Heading and display classes
  • Lead and inline text
  • Blockquotes and lists
  • Text alignment and wrapping
  • Font weight and style utilities

Why It Matters

Bootstrap typography ensures consistent text rendering across browsers and devices, with utility classes that eliminate custom CSS for common text patterns.

<div class="container mt-4">
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>

  <p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>

  <p>You can use <mark>highlighted text</mark>, <del>deleted text</del>,
    <s>strikethrough</s>, <ins>inserted text</ins>, <u>underlined text</u>,
    <small>small text</small>, <strong>bold text</strong>, and <em>italic text</em>.</p>

  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">Someone famous in <cite>Source Title</cite></footer>
  </blockquote>

  <p class="text-start">Start aligned text.</p>
  <p class="text-center">Center aligned text.</p>
  <p class="text-end">End aligned text.</p>

  <ul class="list-unstyled">
    <li>Unstyled list item</li>
    <li>Another item</li>
  </ul>

  <ul class="list-inline">
    <li class="list-inline-item">Inline item 1</li>
    <li class="list-inline-item">Inline item 2</li>
  </ul>
</div>

Expected output: Various typography elements styled with Bootstrap classes: display headings, lead text, blockquotes, text alignment, and list styles.

← Previous Bootstrap Grid System Explained — Responsive Layouts Next → Bootstrap Colors Explained — Color System and Utilities

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap