Bootstrap Typography

Introduction

Bootstrap includes a powerful set of utility classes that help you style content without writing custom CSS. This includes specific classes for typography, spacing, colors, and layout control.

1. Typography Basics

Headings & Display Headings

Bootstrap styles all specific HTML headings (h1 through h6). For larger, more standout headings, use the .display-* classes.

<h1 class="display-1">Display 1</h1>
<h1 class="display-4">Display 4</h1>

Text Utilities

Control alignment, transform, and weight easily:

• .text-center, .text-end (right aligned)
• .text-uppercase, .text-lowercase
• .fw-bold (font-weight: bold), .fst-italic (font-style: italic)

Text Colors

Bootstrap provides context-aware color utilities:

2. Spacing Utilities (The Secret Weapon)

Bootstrap's spacing utilities allow you to add margin and padding without writing new CSS. The format is {property}{sides}-{size}.

Naming Convention

• Property: m (margin), p (padding)
• Sides: t (top), b (bottom), s (start/left), e (end/right), x (left & right), y (top & bottom), blank (all sides)
• Size: 0 to 5 (and auto for margin)

Examples

<div class="mt-3 p-4 bg-light">
  Top margin 3 (1rem), Padding 4 (1.5rem)
</div>

<div class="mx-auto" style="width: 200px;">
  Centered Block (Margin X Auto)
</div>

3. Other Essential Utilities

Display & Visibility

Toggle display properties responsively:

• .d-none (Hidden)
• .d-block (Block)
• .d-md-none (Hidden on medium screens and up)
• .d-flex (Flexbox container)

Borders

Add or remove borders quickly:

• .border, .border-0, .border-top
• .rounded, .rounded-circle, .rounded-0
• .border-primary, .border-danger