1. Headings

Bootstrap resets browser defaults and provides scalable heading styles.

• Native HTML headings (<h1>–<h6>) are supported.

• Classes like .h1–.h6 can be applied to any element to give it heading size.

<h1>h1. Bootstrap heading</h1>
<p class="h3">Paragraph styled like h3</p>

2. Display Headings

For extra-large, attention-grabbing headings, Bootstrap provides display classes:

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

These are larger than normal <h1>–<h6>.

3. Lead Text

Use .lead to make a paragraph stand out (slightly larger font and lighter weight).

<p class="lead">
  This is a lead paragraph. It gives emphasis at the start of a section.
</p>

4. Inline Text Styles

Bootstrap includes semantic and utility text classes:

• <mark> or .mark → highlighted text.

• <small> or .small → small, fine print.

• <s> or .text-decoration-line-through → strikethrough.

• <u> or .text-decoration-underline → underline.

• <strong> → bold emphasis.

• <em> → italic emphasis.

Example:

<p>You can use <mark>highlighted text</mark> for emphasis.</p>

5. Blockquotes

For quotes, Bootstrap provides a blockquote style:

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

With a footer:

<figure>
  <blockquote class="blockquote">
    <p>The journey of a thousand miles begins with a single step.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Lao Tzu in <cite title="Source Title">Tao Te Ching</cite>
  </figcaption>
</figure>

6. Lists

Bootstrap styles lists with default spacing. Useful variations:

Inline list

<ul class="list-inline">
  <li class="list-inline-item">Home</li>
  <li class="list-inline-item">About</li>
  <li class="list-inline-item">Contact</li>
</ul>

Unstyled list

<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

7. Text Alignment

Responsive text alignment utilities:

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

<!-- Responsive -->
<p class="text-center text-md-start">Centered on small, left on medium+</p>

8. Text Transform

• .text-lowercase → lowercase

• .text-uppercase → uppercase

• .text-capitalize → capitalize each word

<p class="text-uppercase">uppercase text</p>

9. Text Color & Background

Use theme colors:

<p class="text-primary">Primary text</p>
<p class="text-success">Success text</p>
<p class="text-danger">Danger text</p>
<p class="bg-dark text-white">Dark background, white text</p>

10. Responsive Font Size (RFS)

Bootstrap 5 automatically scales font sizes responsively using RFS (Responsive Font Size).
This means headings shrink slightly on smaller screens without extra work.

✅ Summary:

• Headings: .h1–.h6 + display-* for larger text.

• Emphasis: .lead, .mark, .small, <strong>, <em>.

• Quotes: .blockquote + .blockquote-footer.

• Lists: .list-unstyled, .list-inline.

• Utilities: alignment, transforms, colors, and responsive scaling.