Bootstrap Typography — Headings, Text Utilities, Lists

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

Bootstrap typography includes heading classes from h1 to h6, display headings for emphasis, lead paragraphs for introductory text, and utilities for alignment, transform, and weight.

What You'll Learn

You will learn how to use Bootstrap's heading classes, display headings, text alignment and transform utilities, font weight and size classes, and how to style lists with Bootstrap.

Why It Matters

Typography establishes visual hierarchy. DodaTech's tutorials use Bootstrap's type scale to clearly separate headings, body text, and code snippets, making content scannable and readable.

Real-World Use

Doda Browser's settings panel uses display headings for page titles, lead text for descriptions, and small text utilities for secondary labels.

flowchart LR
    A[Grid System] --> B[Typography]
    B --> C[Headings]
    B --> D[Text Utilities]
    B --> E[Lists]
    C --> F[Display Classes]
    D --> G[Alignment]
    D --> H[Transform]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style F fill:#22c55e,stroke:#16a34a,color:#fff

Headings

Bootstrap styles all HTML headings (h1 through h6) with consistent sizes and weights:

<h1>h1 heading (2.5rem / 40px)</h1>
<h2>h2 heading (2rem / 32px)</h2>
<h3>h3 heading (1.75rem / 28px)</h3>
<h4>h4 heading (1.5rem / 24px)</h4>
<h5>h5 heading (1.25rem / 20px)</h5>
<h6>h6 heading (1rem / 16px)</h6>

Expected output: Six heading sizes from large to small with consistent font-weight (500) and line-height.

You can apply heading classes to any element:

<p class="h3">This paragraph looks like an h3 heading</p>
<span class="h5">This span looks like an h5 heading</span>

Expected output: A paragraph styled as an h3 and a span styled as an h5, using heading classes on non-heading elements.

Display Headings

Display headings are larger and lighter than regular headings, used for hero sections:

<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>

Expected output: Six display sizes from very large (display-1, ~5rem) to moderate (display-6, ~2.5rem) with lighter font-weight (300).

Lead Paragraph

The .lead class makes a paragraph stand out:

<p class="lead">This is a lead paragraph. It has a larger font size (1.25rem)
  and lighter weight (300) to draw attention as an introduction.</p>
<p>This is a normal paragraph for body content. It uses the default font size
  of 1rem and regular weight (400).</p>

Expected output: The lead paragraph appears larger and lighter, creating visual contrast as an introductory element.

Text Alignment

<p class="text-start">Left aligned text (default)</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>

Expected output: Three lines of text aligned left, center, and right respectively.

Alignment classes are responsive:

<p class="text-start text-md-center text-lg-end">
  Left on small, center on medium, right on large
</p>

Expected output: Text alignment changes at each breakpoint.

Text Transform and Weight

<p class="text-lowercase">Lowercase Text</p>
<p class="text-uppercase">Uppercase Text</p>
<p class="text-capitalize">capitalized text</p>

<p class="fw-bold">Bold text (700)</p>
<p class="fw-semibold">Semibold text (600)</p>
<p class="fw-normal">Normal text (400)</p>
<p class="fw-light">Light text (300)</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>

Expected output: Various text transformations and font weights applied to different paragraphs.

Inline Text Elements

<p><mark>Highlighted</mark> text using mark tag</p>
<p><del>Deleted</del> text using del tag</p>
<p><s>Strikethrough</s> text using s tag</p>
<p><ins>Inserted</ins> text using ins tag</p>
<p><u>Underlined</u> text using u tag</p>
<p><small>Small</small> text using small tag</p>
<p><strong>Bold</strong> text using strong tag</p>
<p><em>Italic</em> text using em tag</p>

Expected output: Each inline element renders with its semantic style.

Lists

<ol class="list-unstyled">
  <li>Unstyled ordered list item</li>
  <li>No bullets or numbers</li>
  <li>Useful for navigation lists</li>
</ol>

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

<dl class="row">
  <dt class="col-sm-3">Term 1</dt>
  <dd class="col-sm-9">Description for term 1.</dd>
  <dt class="col-sm-3">Term 2</dt>
  <dd class="col-sm-9">Description for term 2.</dd>
</dl>

Expected output: A list without bullets, an inline horizontal list, and a horizontal description list using the grid.

Blockquote

<figure>
  <blockquote class="blockquote">
    <p>This is a blockquote for highlighting quotations or callouts.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Expected output: A styled blockquote with larger text and a muted footer credit line.

Common Mistakes

1. Using H1 Tags Multiple Times

Multiple h1 tags on a page harm Accessibility and SEO. Use heading classes on other elements instead.

2. Confusing Display and Heading Classes

Display headings are for hero sections, not regular content hierarchy. Use regular h1-h6 for document structure and display classes for visual emphasis.

3. Not Using Responsive Alignment

Text alignment set with text-center applies at all sizes. Always include a base alignment class when using responsive alignment.

4. Forgetting the Muted Text Class

text-muted and text-body-secondary provide subtle text for secondary content. Use them instead of manually setting color.

5. Overriding Font Sizes Without Reason

Bootstrap's type scale is carefully proportioned. Avoid changing individual font sizes unless your design requires it.

Practice Questions

1. What is the difference between h1 and display-1? h1 has regular weight (500) and standard size. display-1 has light weight (300) and larger size for visual impact.

2. How do you make a paragraph look like an h4 heading? Add the class h4 to the paragraph: <p class="h4">Text</p>.

3. What class creates a larger introductory paragraph? .lead increases font size to 1.25rem and reduces weight to 300.

4. How do you create a horizontal description list? Use <dl class="row"> with <dt class="col-sm-3"> and <dd class="col-sm-9">.

5. What class removes list bullets or numbers? .list-unstyled removes the default list-style.

Challenge

Create a typography showcase page with a display heading, a lead paragraph, a blockquote, a styled description list, and inline text elements. Use responsive alignment to center text on mobile and left-align on desktop.

FAQ

Mini Project

Build a blog post article page using Bootstrap typography. Include a display heading title, a lead subtitle, article body paragraphs, a blockquote, an inline code snippet, and a horizontal description list for meta information.

What's Next

Now style text with Bootstrap Colors and Backgrounds. Then master Margins and Padding with spacing utilities.