Bootstrap 5 Framework

Typography Basics

12 min Lesson 10 of 40

Typography Basics in Bootstrap 5

Bootstrap 5 provides excellent typography utilities that help you create beautiful, readable text content. The typography system is designed with best practices in mind, including proper spacing, responsive scaling, and accessibility.

1. Headings and Display Headings

Bootstrap styles all standard HTML headings (h1 through h6) with consistent spacing and sizing.

<!-- Standard Headings -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<!-- Heading Classes on Other Elements -->
<p class="h1">Paragraph styled as h1</p>
<div class="h2">Div styled as h2</div>
        

Note: Display headings are larger, more impactful headings used for hero sections or prominent titles. They range from display-1 (largest) to display-6 (smallest).

<!-- Display Headings -->
<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>
        

2. Lead Text and Body Text

Use the .lead class to make a paragraph stand out with larger font size and lighter weight.

<!-- Lead Paragraph -->
<p class="lead">
    This is a lead paragraph. It stands out from regular body text
    and is perfect for introductions or important summaries.
</p>

<!-- Regular Paragraph -->
<p>
    This is regular body text. Bootstrap applies consistent styling
    to all paragraphs with proper line-height and spacing.
</p>
        

Best Practice: Use lead paragraphs sparingly, typically just one at the beginning of a section to introduce the content.

3. Text Alignment and Transformation

Bootstrap provides utility classes for text alignment that work responsively.

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

<!-- Responsive Text Alignment -->
<p class="text-start text-md-center text-lg-end">
    Left on mobile, center on tablets, right on desktop
</p>

<!-- Text Transformation -->
<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>
        

Remember: Text alignment utilities use "start" and "end" instead of "left" and "right" to support RTL (Right-to-Left) languages.

4. Font Weight and Italics

Control the font weight and style of your text with utility classes.

<!-- Font Weights -->
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text (relative to parent)</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-normal">Normal weight text</p>
<p class="fw-light">Light weight text</p>
<p class="fw-lighter">Lighter weight text</p>

<!-- Font Style -->
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal text (removes italic)</p>

<!-- Line Height -->
<p class="lh-1">Tight line height</p>
<p class="lh-sm">Small line height</p>
<p class="lh-base">Base line height</p>
<p class="lh-lg">Large line height</p>
        

5. Text Colors and Utilities

Bootstrap provides contextual color classes for text that match the theme colors.

<!-- Contextual Text Colors -->
<p class="text-primary">Primary text color</p>
<p class="text-secondary">Secondary text color</p>
<p class="text-success">Success text color</p>
<p class="text-danger">Danger text color</p>
<p class="text-warning">Warning text color</p>
<p class="text-info">Info text color</p>
<p class="text-light bg-dark">Light text color</p>
<p class="text-dark">Dark text color</p>
<p class="text-muted">Muted text color</p>
<p class="text-white bg-dark">White text color</p>

<!-- Text with Background -->
<p class="text-bg-primary">Text with primary background</p>
<p class="text-bg-success">Text with success background</p>

<!-- Text Decoration -->
<p class="text-decoration-underline">Underlined text</p>
<p class="text-decoration-line-through">Line through text</p>
<a href="#" class="text-decoration-none">Link with no underline</a>
        

Accessibility: When using color to convey meaning, always provide additional context (like icons or text) for users who may not be able to see the colors.

6. Additional Text Utilities

<!-- Text Wrapping and Overflow -->
<p class="text-wrap">This text will wrap normally</p>
<p class="text-nowrap">This text will not wrap</p>
<p class="text-break">This text will break long words to prevent overflow</p>
<p class="text-truncate" style="max-width: 200px;">
    This text will be truncated with an ellipsis...
</p>

<!-- Font Size Utilities -->
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6 (smallest)</p>

<!-- Monospace Font -->
<p class="font-monospace">This is in monospace font</p>

<!-- Text Reset -->
<p class="text-reset">
    This text <a href="#" class="text-reset">inherits color from parent</a>
</p>
        

7. Practical Example: Article Header

<article class="py-5">
    <div class="container">
        <!-- Category Badge -->
        <span class="badge text-bg-primary mb-2">Web Development</span>

        <!-- Article Title -->
        <h1 class="display-4 fw-bold mb-3">
            Getting Started with Bootstrap 5 Typography
        </h1>

        <!-- Article Meta -->
        <p class="text-muted mb-4">
            <span class="fw-semibold">By John Doe</span> &middot;
            <time>May 15, 2024</time> &middot;
            5 min read
        </p>

        <!-- Lead Paragraph -->
        <p class="lead mb-4">
            Typography is the foundation of good design. Bootstrap 5 provides
            a comprehensive set of typography utilities that help you create
            beautiful, readable content with minimal effort.
        </p>

        <!-- Article Body -->
        <p>
            In this tutorial, we'll explore all the typography features
            available in Bootstrap 5, from basic headings to advanced
            text utilities. You'll learn how to create professional-looking
            text content that works perfectly across all devices.
        </p>
    </div>
</article>
        

Practice Exercise

Task: Create a blog post preview card with the following requirements:

Display heading for the title
Lead paragraph for the excerpt
Muted text for author and date
Badge for category with primary background
Proper text alignment and spacing
Use appropriate font weights

Bonus: Make the text alignment responsive - centered on mobile, left-aligned on desktop.

Summary

Bootstrap provides consistent styling for headings (h1-h6) and display headings (display-1 to display-6)
Use .lead class for introductory paragraphs that stand out
Text alignment utilities (text-start, text-center, text-end) support responsive breakpoints
Font weight classes range from fw-lighter to fw-bolder
Contextual text colors (text-primary, text-success, etc.) convey meaning
Additional utilities control text transformation, decoration, wrapping, and overflow
Use text-start/text-end instead of left/right for RTL language support