Bootstrap Typography, Colors & Spacing — Core Utilities

Before diving into components, it's essential to understand Bootstrap's core utilities. These are the building blocks you'll use on every page — typography for text styling, colors for theming, and spacing for layout control. Mastering these utilities will make you significantly faster at building UIs.

1. Typography

Bootstrap provides a clean, consistent typography system built on native font stacks. Everything is designed to be readable and accessible out of the box.

Headings

Use standard HTML headings (<h1> through <h6>) or the .h1 through .h6 classes for matching heading styles on any element.

<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>

<!-- Or use classes on any element -->
<p class="h1">This looks like an h1</p>

Display Headings

Display headings are larger, more prominent headings for extra visual impact. Use .display-1 through .display-6.

<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>

Lead Paragraph

Make a paragraph stand out with the .lead class.

<p class="lead">
    This is a lead paragraph. It stands out from regular body text.
</p>

Inline Text Elements

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Text Utilities

<p class="text-center text-uppercase fw-bold">
    CENTERED, UPPERCASE, BOLD TEXT
</p>

<p class="text-end text-lowercase fst-italic">
    RIGHT ALIGNED, LOWERCASE, ITALIC
</p>

<p class="text-truncate" style="max-width: 200px;">
    This long text will be truncated with an ellipsis...
</p>

2. Colors

Bootstrap provides a consistent color system with contextual classes for text, backgrounds, and components.

Text Colors

Use .text-{color} classes to apply color to text.

<p class="text-primary">.text-primary - Primary text</p>
<p class="text-success">.text-success - Success text</p>
<p class="text-danger">.text-danger - Danger text</p>
<p class="text-warning">.text-warning - Warning text</p>
<p class="text-info">.text-info - Info text</p>
<p class="text-muted">.text-muted - Muted text</p>

Background Colors

Use .bg-{color} classes to apply background colors.

<div class="bg-primary text-white p-3">Primary background</div>
<div class="bg-success text-white p-3">Success background</div>
<div class="bg-danger text-white p-3">Danger background</div>
<div class="bg-warning p-3">Warning background</div>
<div class="bg-info p-3">Info background</div>
<div class="bg-light p-3">Light background</div>
<div class="bg-dark text-white p-3">Dark background</div>

Background Gradient

Add .bg-gradient to any background color for a subtle gradient effect.

<div class="bg-primary bg-gradient text-white p-3">Primary with gradient</div>

3. Spacing Utilities

Spacing utilities control margin (m) and padding (p) with responsive options. The system uses a scale from 0 to 5 (and beyond with auto).

The Spacing Scale

Margin Classes

Margin classes use the format: m{side}-{size} or m{breakpoint}-{side}-{size}.

• m — all sides
• mt — top
• mb — bottom
• ms — start (left in LTR)
• me — end (right in LTR)
• mx — left & right
• my — top & bottom

<div class="mt-3">Margin top 1rem</div>
<div class="mb-4">Margin bottom 1.5rem</div>
<div class="mx-auto" style="width: 200px;">Centered horizontally</div>
<div class="my-5">Margin top and bottom 3rem</div>

Padding Classes

Padding classes use the same format: p{side}-{size} or p{breakpoint}-{side}-{size}.

• p — all sides
• pt — top
• pb — bottom
• ps — start (left in LTR)
• pe — end (right in LTR)
• px — left & right
• py — top & bottom

<div class="p-3 bg-light">Padding 1rem on all sides</div>
<div class="px-4 py-2 bg-primary text-white">Horizontal 1.5rem, vertical 0.5rem</div>
<div class="pt-5">Padding top 3rem</div>

Responsive Spacing

Add breakpoints to apply spacing only at certain screen sizes.

<div class="mt-3 mt-md-5 mt-lg-0">
    Top margin: 1rem on all screens,
    3rem on medium screens and up,
    0 on large screens and up
</div>

<div class="p-2 p-sm-3 p-md-4 p-lg-5">
    Padding increases as screen size grows
</div>

Gap Utilities

For flex and grid layouts, use gap-{size} to add space between items.

<div class="d-flex gap-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Putting It All Together

Here's an example that combines typography, colors, and spacing:

<div class="container mt-5">
    <div class="row g-4">
        <div class="col-12">
            <h1 class="display-4 text-primary fw-bold">Welcome to My Site</h1>
            <p class="lead text-muted">This is an introduction paragraph.</p>
        </div>
        <div class="col-md-6">
            <div class="bg-success text-white p-4 rounded">
                <h3 class="text-white">Success Message</h3>
                <p>This is a success alert with proper spacing.</p>
            </div>
        </div>
        <div class="col-md-6">
            <div class="bg-danger text-white p-4 rounded">
                <h3 class="text-white">Danger Message</h3>
                <p>This is a danger alert with proper spacing.</p>
            </div>
        </div>
    </div>
</div>