Academy HTML CSS JavaScript TypeScript SQL MongoDB Python NumPy Pandas PHP Java C C++ C# Bootstrap Tailwind CSS jQuery React Vue.js Node.js Git
❮ ❯

Bootstrap Typography

Headings, display text, lead and text utilities.

✍️ 3 exercises + code challenge in this lesson
❮ Previous Next ❯
  • .display-1 to .display-6: large, eye-catching headings.
  • .lead: a paragraph that stands out.
  • .text-center, .text-end, .text-uppercase, .fw-bold, .fst-italic
  • .text-muted / .text-body-secondary, .small, <mark>
  • .blockquote with .blockquote-footer

Key Takeaways: Bootstrap Typography

Mastering Bootstrap Typography helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Bootstrap Typography Code Example

Bootstrap 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-3">
  <h1 class="display-5 fw-bold">Display heading</h1>
  <p class="lead">A lead paragraph that introduces the page.</p>
  <p class="text-uppercase text-secondary small">Uppercase, small and muted</p>
  <p>Some <mark>highlighted</mark> and <strong class="text-primary">coloured</strong> text.</p>
  <figure>
    <blockquote class="blockquote"><p>Simplicity is the soul of efficiency.</p></blockquote>
    <figcaption class="blockquote-footer">Austin Freeman</figcaption>
  </figure>
</div>
Free sign-in required · Google login available

Bootstrap Typography Practice Exercises

Check what you learned in “Bootstrap Typography”.

/ 3 solved
Fill in the blank

Make the paragraph stand out.

<p class="">Introduction text</p>
✓ Correct! Not quite. Try again.
Multiple choice

Which class makes text bold?

✓ Correct! Not quite. Try again.
Code challenge

Give the heading the class "display-4" and centre it with "text-center".

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
❮ Previous
Bootstrap Grid System
Next ❯
Bootstrap Colors

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services