Bootstrap 5 Typography Guide with Examples for Beginners

Your website can display professional-looking text with this built-in feature of Bootstrap 5. An explanation of Bootstrap 5 Typography follows in straightforward terms. There is no use of technical jargon; instead, you will receive practical advice.

Typography is how we style and arrange text. This approach helps readers consume text content easily. In Bootstrap 5, typography is built-in. Coders require no additional commands to style their texts.

What is typography?

Typography means the way letters look and how we place them. Think of it like choosing the right font, size, or spacing for a poster.

What Is Typography in Graphic Design?

In graphic design, typography is used to make designs look clean and professional. The designer selects a specific font that reflects the brand image or the intended message.

Bootstrap 5 Typography Basics

Bootstrap 5 has simple classes that style text. You can easily control text size, color, alignment, and spacing using class names.

Bootstrap’s Default Settings

• Font size: 14px
• Line height: 1.428
• Font family: system-ui, sans-serif

Headings in Bootstrap

You can use <h1> to <h6> tags. Bootstrap changes their size:

<h1>Heading 1</h1> <!-- 36px -->
<h2>Heading 2</h2> <!-- 30px -->
<h3>Heading 3</h3> <!-- 24px -->
<h4>Heading 4</h4> <!-- 18px -->
<h5>Heading 5</h5> <!-- 14px -->
<h6>Heading 6</h6> <!-- 12px -->

How to Use Bootstrap’s Font Sizes

Need smaller text? Use Bootstrap’s .small class:

<p class="small">This text is smaller (80% of normal size).</p>  
<p class="fs-1">Big text</p>
<p class="fs-6">Small text</p>

Typography Classes in Bootstrap 5

Bootstrap gives ready-to-use classes for styling:

Text Alignment:

<p class="text-center">Centered text</p>  
<p class="text-end">Right-aligned text</p>  

Text Colors:

<p class="text-success">Green success message</p>

Typography Class Tips

Want to make your site look clean? Use these:

• .lead for important text
• .text-muted for faded text
• .text-end, .text-center, .text-start for alignment
• .text-lowercase, .text-uppercase, .text-capitalize for case

Bootstrap 5 Typography Examples

1. Bootstrap News Article Layout

Use Bootstrap typography classes to craft a readable article, including a lead paragraph and concise footer text.

<div class="container mt-4">
  <h1 class="mb-3">Breaking News: Tech Trends in 2025</h1>
  <p class="lead">Technology is changing fast. In 2025, we expect AI, Web3, and AR to grow more popular.</p>
  <p>
    Experts say that the tech world will shift towards more human-friendly solutions. 
    Companies are investing in smarter and more ethical technology.
  </p>
  <p class="small text-muted">Written by JV Codes • April 10, 2025</p>
</div>

2. Bootstrap Blog Post Layout

Clear hierarchy for headings and body text.

<article class="container">  
  <h1 class="display-5">How to Grow Organic Tomatoes</h1>  
  <p class="lead">Discover simple tricks for juicy homegrown tomatoes.</p>  
  <h2 class="h4">Best Soil Types</h2>  
  <p class="text-muted">Sandy loam works best...</p>  
</article>  

• display-5 makes the title stand out
• lead highlights the summary
• h4 as subheading creates visual flow

3. Bootstrap Hospital Website Doctor Profile

This shows a doctor’s profile using heading styles and muted small text.

<div class="container py-4">
  <h2>Dr. Sarah Williams <small class="text-muted">MD, Cardiologist</small></h2>
  <p class="text-muted">10+ years experience | NYC Heart Center</p>
  <p>
    Dr. Sarah is known for her patient care and experience in heart surgeries. 
    She has published over 30 papers on cardiovascular health.
  </p>
  <p class="text-success">Now accepting new patients</p>
</div>

4. Bootstrap E-commerce Product Description

Bootstrap typography helps style product names, prices, and highlights.

<div class="container mt-5">
  <h3>Wireless Bluetooth Headphones <small class="text-muted">Model X10</small></h3>
  <p class="fs-4 text-primary">$79.99</p>
  <p class="text-uppercase text-success">free shipping</p>
  <p>
    Experience high-quality sound with noise cancellation. 
    Long battery life and modern design make these headphones perfect for music lovers.
  </p>
</div>

5. Bootstrap Pricing Table

<div class="card">  
  <div class="card-body">  
    <h3 class="h2">Premium Plan</h3>  
    <p><span class="fs-1">$29</span>/month</p>  
    <small class="text-muted">Billed annually</small>  
    <ul class="list-unstyled">  
      <li>✔️ Unlimited projects</li>  
    </ul>  
  </div>  
</div>  

6. Bootstrap FAQ Section

Use case: Organized Q&A format

<div class="container">  
  <h2 class="h3 mb-4">Common Questions</h2>  
  <dl class="row">  
    <dt class="col-sm-3 text-truncate">Payment Options?</dt>  
    <dd class="col-sm-9">We accept credit cards...</dd>  
    <dt class="col-sm-3 text-success">Money Back?</dt>  
    <dd class="col-sm-9">30-day guarantee...</dd>  
  </dl>  
</div>  

7. Bootstrap Invoice Template

<div class="container border p-4 mt-4">
  <h4>Invoice #1023</h4>
  <p class="text-muted">Date: April 10, 2025</p>
  
  <h6 class="text-uppercase">Customer</h6>
  <p>John Doe<br>123 Market Street<br>Cityville</p>

  <h6 class="text-uppercase">Items</h6>
  <p>Web Hosting Plan - <span class="text-success">$120.00</span></p>
  <p>Domain Name - <span class="text-success">$15.00</span></p>

  <p class="text-end fs-5 fw-bold">Total: $135.00</p>
</div>

8. Bootstrap Online Course Page

<div class="container my-4">
  <h2 class="text-center">Learn JavaScript from Scratch</h2>
  <p class="lead text-center text-muted">A beginner-friendly course to become a frontend developer</p>
  <p>
    This course covers variables, functions, DOM, and real-world projects. 
    Build confidence and get hands-on experience with JavaScript in just 4 weeks.
  </p>
  <p class="text-end small text-muted">Instructor: Shokat Javed</p>
</div>

9. Bootstrap Landing Page Hero

<div class="text-center py-5 bg-primary text-white">  
  <h1 class="display-3 mb-4">Learn Coding Fast</h1>  
  <p class="fs-5">Start your journey in 30 days</p>  
  <button class="btn btn-warning btn-lg">Enroll Now</button>  
</div>  

10. Bootstrap Navigation Menu

Why Typography Matters in Web Design

• Bad typography = Users leave quickly.
• Good typography = Better readability + trust.

Quick Tips for Better Typography

1. Stick to 2-3 fonts max (e.g., one for headings, one for body).
2. Use contrast: Dark text on light backgrounds.
3. Test on mobile – text shouldn’t look cramped.

Final Thoughts

The main element in website creation is typographic elements. Bootstrap 5 Typography gives you ready-to-use classes. Bootstrap provides time-saving tools that produce attractive content across every screen type.

Start with Bootstrap’s built-in classes. Experiment with headings, colors, and alignment. Small changes make a big difference!

Use the examples shown previously to experience the basic simplicity of implementation. Bootstrap 5 typography is waiting for you now to enhance your content presentation.