Typography
Style text with Bootstrap's heading classes, the .lead class, and text utility classes like text-center and fw-bold.
Introduction
Text is the foundation of nearly every web page, and Bootstrap provides a full set of typography styles and utility classes to control it: consistent heading sizes, an eye-catching lead paragraph style, and small utility classes for alignment, weight, and color.
- Bootstrap's default styles for h1 through h6.
- How to apply heading styles to non-heading elements.
- How to use the .lead class for introductory paragraphs.
- Text alignment, weight, and color utility classes.
Default Heading Styles
Bootstrap automatically styles standard HTML heading tags (`<h1>` through `<h6>`) with a consistent font size scale, font weight, and spacing, right out of the box, with no extra classes needed.
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>Click Run to see what this code prints.
Heading Classes on Other Elements
Sometimes you want the visual size of a heading without using an actual heading tag, for semantic or accessibility reasons. Bootstrap provides `.h1` through `.h6` classes that apply the same visual styling to any element, such as a `<span>` or `<div>`.
<p class="h3">This paragraph looks like an h3 heading.</p>Click Run to see what this code prints.
The .lead Class
The `.lead` class makes a paragraph stand out as introductory text, typically used just under a page or section title. It increases the font size slightly and adjusts the font weight to draw the reader's eye before they move into the regular body text.
<h1>Welcome to PrograMinds</h1><p class="lead"> Learn to code with hands-on lessons covering everything from HTML basics to full-stack frameworks.</p><p>Browse our full course catalog to get started today.</p>Click Run to see what this code prints.
Text Alignment Utilities
Bootstrap includes simple utility classes to control text alignment: `.text-start` (left, the default in left-to-right languages), `.text-center`, and `.text-end` (right). These can also be combined with a breakpoint infix, like `.text-md-center`, to change alignment only at certain screen sizes.
<p class="text-center">This text is centered.</p><p class="text-end">This text is right-aligned.</p><p class="text-center text-md-start">Centered on mobile, left-aligned from md up.</p>Click Run to see what this code prints.
Font Weight and Style Utilities
Bootstrap provides utility classes for adjusting font weight and style without writing custom CSS, including `.fw-bold`, `.fw-semibold`, `.fw-normal`, `.fw-light`, and `.fst-italic` for italics.
<p class="fw-bold">This text is bold.</p><p class="fw-light">This text is light weight.</p><p class="fst-italic">This text is italic.</p>Click Run to see what this code prints.
Text Color Utilities
Text color classes follow the pattern `.text-{color}`, using Bootstrap's theme color names such as primary, secondary, success, danger, warning, info, light, dark, and muted.
<p class="text-primary">Primary colored text.</p><p class="text-danger fw-bold">Bold, danger-colored warning text.</p><p class="text-muted">Muted, low-emphasis helper text.</p>Click Run to see what this code prints.
Common Mistakes
- Using a heading class like .h2 purely for visual size while ignoring proper semantic heading order (h1, then h2, then h3) for accessibility.
- Applying .lead to every paragraph instead of just the single introductory one, which weakens its visual impact.
- Forgetting that .text-muted and similar color utilities may fail color-contrast accessibility checks on some backgrounds.
- Overriding Bootstrap's heading font sizes with custom CSS instead of adjusting the underlying Sass typography variables.
Best Practices
- Keep semantic heading order correct for accessibility, and use .h1-.h6 classes only when you need heading styling on a non-heading tag.
- Reserve .lead for a single introductory paragraph per page or section.
- Combine text utilities, like .fw-bold and .text-danger together, to build emphasis without custom CSS.
- Check color contrast when using text color utilities on colored or dark backgrounds.
Frequently Asked Questions
Yes, .lead is just a CSS class and can technically be applied to any text element, though it is most commonly used on a <p> tag.
Alignment utilities like .text-center support breakpoint infixes (e.g., .text-lg-end), but weight and color utilities generally do not have responsive variants.
You can override the $font-family-sans-serif Sass variable before compiling, or add your own custom CSS font-family rule to the body targeting a higher specificity than Bootstrap's default.
Key Takeaways
- Bootstrap automatically styles h1 through h6 with a consistent type scale.
- .h1 through .h6 classes apply heading styles to non-heading elements.
- .lead makes a paragraph stand out as introductory text.
- Utility classes like .text-center, .fw-bold, and .text-danger handle alignment, weight, and color without custom CSS.
Summary
Bootstrap's typography system gives you a consistent, easy-to-use way to style all the text on your page. Next, you will look at how Bootstrap handles color more broadly, using theme color classes for backgrounds and other elements beyond just text.