Bootstrap 5 Framework

Spacing Utilities

13 min Lesson 15 of 40

Understanding Bootstrap Spacing Utilities

Bootstrap provides powerful spacing utilities for controlling margin and padding. These utilities follow a consistent naming pattern and make it easy to create well-spaced layouts without writing custom CSS.

Spacing Notation

Bootstrap spacing utilities use a simple format: {property}{sides}-{size}

Format breakdown:

property: m (margin) or p (padding)
sides: t (top), b (bottom), s (start/left), e (end/right), x (left+right), y (top+bottom), or blank (all sides)
size: 0, 1, 2, 3, 4, 5, or auto

Margin Utilities

Add margin to elements using the m-* classes:

<!-- Margin on all sides -->
<div class="m-0">No margin</div>
<div class="m-1">Small margin (0.25rem)</div>
<div class="m-2">Medium margin (0.5rem)</div>
<div class="m-3">Regular margin (1rem)</div>
<div class="m-4">Large margin (1.5rem)</div>
<div class="m-5">Extra large margin (3rem)</div>

<!-- Margin top -->
<div class="mt-3">Margin top</div>

<!-- Margin bottom -->
<div class="mb-3">Margin bottom</div>

<!-- Margin left (start) -->
<div class="ms-3">Margin start (left in LTR)</div>

<!-- Margin right (end) -->
<div class="me-3">Margin end (right in LTR)</div>

<!-- Margin horizontal (left + right) -->
<div class="mx-3">Margin horizontal</div>

<!-- Margin vertical (top + bottom) -->
<div class="my-3">Margin vertical</div>
    

Padding Utilities

Add padding to elements using the p-* classes:

<!-- Padding on all sides -->
<div class="p-0">No padding</div>
<div class="p-1">Small padding (0.25rem)</div>
<div class="p-2">Medium padding (0.5rem)</div>
<div class="p-3">Regular padding (1rem)</div>
<div class="p-4">Large padding (1.5rem)</div>
<div class="p-5">Extra large padding (3rem)</div>

<!-- Padding top -->
<div class="pt-3">Padding top</div>

<!-- Padding bottom -->
<div class="pb-3">Padding bottom</div>

<!-- Padding left (start) -->
<div class="ps-3">Padding start (left in LTR)</div>

<!-- Padding right (end) -->
<div class="pe-3">Padding end (right in LTR)</div>

<!-- Padding horizontal (left + right) -->
<div class="px-3">Padding horizontal</div>

<!-- Padding vertical (top + bottom) -->
<div class="py-3">Padding vertical</div>
    

Tip: Use px and py to quickly add symmetric horizontal or vertical spacing without targeting individual sides.

The Spacing Scale

Bootstrap's spacing scale provides consistent increments:

<!-- Visual representation of spacing scale -->
<div class="border p-1 mb-2">p-1 = 0.25rem = 4px</div>
<div class="border p-2 mb-2">p-2 = 0.5rem = 8px</div>
<div class="border p-3 mb-2">p-3 = 1rem = 16px</div>
<div class="border p-4 mb-2">p-4 = 1.5rem = 24px</div>
<div class="border p-5 mb-2">p-5 = 3rem = 48px</div>
    

Class	Value (rem)	Value (px at 16px base)	Use Case
`*-0`	0	0px	Remove spacing
`*-1`	0.25rem	4px	Tiny spacing, fine adjustments
`*-2`	0.5rem	8px	Small spacing, compact layouts
`*-3`	1rem	16px	Default spacing, most common
`*-4`	1.5rem	24px	Larger spacing, section padding
`*-5`	3rem	48px	Extra large spacing, major sections

Auto Margin for Centering

Use auto with margin utilities to center elements or push them to one side:

<!-- Center a block element -->
<div class="mx-auto" style="width: 200px;">
    Centered element
</div>

<!-- Push element to the right -->
<div class="ms-auto" style="width: 200px;">
    Pushed to the right
</div>

<!-- Push element to the left -->
<div class="me-auto" style="width: 200px;">
    Pushed to the left
</div>

<!-- Flexbox: push item to end -->
<div class="d-flex">
    <div>Left item</div>
    <div class="ms-auto">Right item</div>
</div>
    

Negative Margins

Bootstrap provides negative margin utilities for overlapping elements or pulling content closer:

<!-- Negative margin top -->
<div class="mt-n3">Negative margin top</div>

<!-- Negative margin bottom -->
<div class="mb-n3">Negative margin bottom</div>

<!-- Negative margin start -->
<div class="ms-n3">Negative margin start</div>

<!-- Negative margin end -->
<div class="me-n3">Negative margin end</div>

<!-- Example: overlapping cards -->
<div class="card">
    <img src="image.jpg" class="card-img-top" alt="...">
    <div class="card-body mt-n5">
        <div class="bg-white shadow rounded p-3">
            <h5>Overlapping content</h5>
        </div>
    </div>
</div>
    

Warning: Negative margins can cause content to overlap or extend beyond container boundaries. Use them carefully and test on different screen sizes.

Responsive Spacing

Apply spacing at specific breakpoints using responsive variants:

<!-- Margin changes with breakpoint -->
<div class="m-1 m-sm-2 m-md-3 m-lg-4 m-xl-5">
    Responsive margin
</div>

<!-- Padding at large screens and above -->
<div class="p-0 p-lg-4">
    No padding on small screens, padding on large screens
</div>

<!-- Different top margins per breakpoint -->
<div class="mt-2 mt-md-4 mt-lg-5">
    Increasing margin as screen grows
</div>

<!-- Center on medium screens and up -->
<div class="mx-0 mx-md-auto" style="width: 300px;">
    Centered on medium screens and above
</div>
    

Responsive Breakpoints:

-sm = 576px and up
-md = 768px and up
-lg = 992px and up
-xl = 1200px and up
-xxl = 1400px and up

Combining Spacing Utilities

Stack multiple spacing classes for precise control:

<!-- Different spacing on each side -->
<div class="mt-3 mb-4 ms-2 me-5">
    Custom spacing on each side
</div>

<!-- Padding and margin combined -->
<div class="p-4 m-3">
    Padding inside, margin outside
</div>

<!-- Reset then customize -->
<div class="m-0 mt-3">
    No margin except top
</div>

<!-- Complex responsive spacing -->
<div class="p-2 p-md-3 p-lg-4 m-1 m-md-2 m-lg-3">
    Responsive padding and margin
</div>
    

Practical Example: Card Layout with Spacing

Create a well-spaced card layout using spacing utilities:

<div class="container py-5">
    <div class="row g-4">
        <div class="col-md-6 col-lg-4">
            <div class="card h-100 shadow-sm">
                <img src="product1.jpg" class="card-img-top" alt="Product">
                <div class="card-body p-4">
                    <h5 class="card-title mb-3">Product Name</h5>
                    <p class="card-text text-muted mb-4">
                        Product description goes here with proper spacing.
                    </p>
                    <div class="d-flex justify-content-between align-items-center">
                        <span class="h4 mb-0">$29.99</span>
                        <button class="btn btn-primary">Add to Cart</button>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-0 pt-0 px-4 pb-4">
                    <small class="text-muted">Free shipping on orders over $50</small>
                </div>
            </div>
        </div>

        <!-- More cards... -->
    </div>
</div>
    

Spacing in Flexbox Layouts

Combine spacing utilities with flexbox for powerful layouts:

<!-- Navigation with auto margins -->
<nav class="d-flex align-items-center p-3 bg-light">
    <div class="fw-bold">Logo</div>
    <div class="ms-auto d-flex gap-3">
        <a href="#" class="text-decoration-none">Home</a>
        <a href="#" class="text-decoration-none">About</a>
        <a href="#" class="text-decoration-none">Contact</a>
    </div>
</nav>

<!-- Vertically spaced items -->
<div class="d-flex flex-column">
    <div class="mb-3">Item 1</div>
    <div class="mb-3">Item 2</div>
    <div class="mb-3">Item 3</div>
    <div class="mt-auto">Last item pushed to bottom</div>
</div>
    

Tip: The gap-* utility classes (gap-1 through gap-5) provide spacing between flex or grid items without needing margin on each child.

Common Spacing Patterns

Here are some frequently used spacing patterns:

<!-- Section spacing -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Section Title</h2>
        <p class="mb-3">Content...</p>
    </div>
</section>

<!-- Form group spacing -->
<div class="mb-3">
    <label class="form-label">Email</label>
    <input type="email" class="form-control">
</div>

<!-- Button group -->
<div class="d-flex gap-2">
    <button class="btn btn-primary">Save</button>
    <button class="btn btn-secondary">Cancel</button>
</div>

<!-- Card spacing -->
<div class="card">
    <div class="card-body p-4">
        <h5 class="card-title mb-3">Title</h5>
        <p class="card-text mb-0">Content</p>
    </div>
</div>
    

Exercise: Build a Pricing Page

Create a pricing page demonstrating mastery of spacing utilities:

Create a hero section with vertical padding (py-5)
Add three pricing cards in a row with gutters (g-4)
Use card body padding (p-4) and proper spacing between elements
Add spacing between price and features (my-4)
Create a footer with padding and centered content (mx-auto)
Make spacing responsive (smaller on mobile, larger on desktop)

Bonus: Add a featured pricing card that uses negative margins (mt-n3) to slightly overlap with the section above.

Summary

Spacing utilities follow the format: {property}{sides}-{size}
Use m-* for margins and p-* for padding
Target specific sides: t (top), b (bottom), s (start), e (end), x (horizontal), y (vertical)
Spacing scale ranges from 0 to 5 (0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem)
Use auto margins for centering and flexbox alignment
Negative margins (mt-n*, mb-n*, etc.) create overlaps
Responsive spacing applies different spacing at breakpoints
Combine multiple spacing classes for precise control
Gap utilities provide clean spacing in flex and grid layouts