Skip to main content
Bootstrap
CHAPTER 06 Beginner

Spacing and Sizing Utilities

Updated: May 18, 2026
5 min read

# CHAPTER 6

Spacing and Sizing Utilities

1. Chapter Introduction

Spacing is the most-used category of Bootstrap utilities. Every professional layout uses margin and padding utilities dozens of times per page. Bootstrap's spacing system follows a scale of 0–5 (plus auto) that maps to rem values. Once mastered, you will never write margin: 1rem in custom CSS again.

2. Learning Objectives

  • Apply margin (m-*) and padding (p-*) utilities.
  • Use directional spacing (top, bottom, start, end).
  • Use responsive spacing classes.
  • Control element width and height.
  • Build a card spacing design system.

3. Spacing Scale

text
123456789 
Bootstrap Spacing Scale (base: 1rem = 16px):

0 → 0
1 → 0.25rem  (4px)
2 → 0.5rem   (8px)
3 → 1rem     (16px)
4 → 1.5rem   (24px)
5 → 3rem     (48px)
auto → auto (for centering)

4. Margin Utilities

html
12345678910111213141516171819202122 
<!-- Syntax: m{side}-{size} -->

<!-- All sides -->
<div class="m-0">No margin</div>
<div class="m-1">0.25rem margin all sides</div>
<div class="m-3">1rem margin all sides</div>
<div class="m-5">3rem margin all sides</div>

<!-- Specific sides -->
<div class="mt-3">Top margin 1rem</div>       <!-- margin-top -->
<div class="mb-3">Bottom margin 1rem</div>    <!-- margin-bottom -->
<div class="ms-3">Start (left) margin</div>  <!-- margin-left -->
<div class="me-3">End (right) margin</div>   <!-- margin-right -->
<div class="mx-3">Horizontal margin (left+right)</div>
<div class="my-3">Vertical margin (top+bottom)</div>

<!-- Auto margins (for centering) -->
<div class="mx-auto" style="width: 300px;">Centered block</div>
<div class="ms-auto">Pushed to right</div>

<!-- Negative margins (Bootstrap 5) -->
<div class="mt-n2">Negative top margin (-0.5rem)</div>

5. Padding Utilities

html
123456789101112 
<!-- Syntax: p{side}-{size} -->

<div class="p-0">No padding</div>
<div class="p-2">0.5rem padding all sides</div>
<div class="p-4">1.5rem padding all sides</div>

<div class="pt-3">Top padding 1rem</div>
<div class="pb-3">Bottom padding 1rem</div>
<div class="ps-4">Start (left) padding 1.5rem</div>
<div class="pe-4">End (right) padding 1.5rem</div>
<div class="px-4">Horizontal padding (left+right)</div>
<div class="py-5">Vertical padding (top+bottom) 3rem</div>

6. Responsive Spacing

html
1234567891011121314 
<!-- Syntax: m{side}-{breakpoint}-{size} -->

<!-- No margin on mobile, margin top 5 on desktop -->
<div class="mt-0 mt-md-5">Responsive top margin</div>

<!-- Small padding on mobile, large on desktop -->
<div class="p-2 p-lg-5">Responsive padding</div>

<!-- Section spacing pattern -->
<section class="py-3 py-md-5">
  <div class="container">
    <!-- Content gets more vertical space on larger screens -->
  </div>
</section>

7. Width and Height Utilities

html
1234567891011121314151617181920 
<!-- Width utilities (% of parent) -->
<div class="w-25">25% wide</div>
<div class="w-50">50% wide</div>
<div class="w-75">75% wide</div>
<div class="w-100">100% wide</div>
<div class="w-auto">Auto width</div>

<!-- Height utilities -->
<div class="h-25">25% tall</div>
<div class="h-50">50% tall</div>
<div class="h-75">75% tall</div>
<div class="h-100">100% tall</div>

<!-- Min/Max width and height -->
<div class="mw-100">Max-width 100%</div>
<div class="mh-100">Max-height 100%</div>
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">100vw wide</div>
<div class="vh-100">100vh tall</div>

8. Gap Utilities (Flexbox and Grid)

html
1234567891011 
<!-- Gap between flex/grid children -->
<div class="d-flex gap-3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<div class="d-grid gap-2">
  <button class="btn btn-primary">Button 1</button>
  <button class="btn btn-secondary">Button 2</button>
</div>

9. Mini Project: Card Spacing Design System

html
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Spacing Design System</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" />
</head>
<body class="bg-light">
  <div class="container py-5">
    <h1 class="text-center mb-2">Pricing Cards</h1>
    <p class="text-center text-muted mb-5">Consistent spacing across all cards</p>

    <div class="row g-4 justify-content-center">
      <!-- Basic Plan -->
      <div class="col-12 col-md-4">
        <div class="card h-100 border-0 shadow-sm">
          <div class="card-body p-4">
            <h5 class="card-title mb-1">Starter</h5>
            <p class="text-muted mb-3">For individuals</p>
            <div class="mb-4">
              <span class="display-5 fw-bold">$9</span>
              <span class="text-muted">/month</span>
            </div>
            <ul class="list-unstyled mb-4">
              <li class="mb-2">✅ 5 Projects</li>
              <li class="mb-2">✅ 10 GB Storage</li>
              <li class="mb-2 text-muted">❌ Team features</li>
            </ul>
            <div class="d-grid">
              <a href="#" class="btn btn-outline-primary">Get Started</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Pro Plan -->
      <div class="col-12 col-md-4">
        <div class="card h-100 border-0 shadow bg-primary text-white">
          <div class="card-body p-4">
            <h5 class="card-title mb-1">Pro</h5>
            <p class="mb-3" style="opacity:.8">For teams</p>
            <div class="mb-4">
              <span class="display-5 fw-bold">$29</span>
              <span style="opacity:.8">/month</span>
            </div>
            <ul class="list-unstyled mb-4">
              <li class="mb-2">✅ Unlimited Projects</li>
              <li class="mb-2">✅ 100 GB Storage</li>
              <li class="mb-2">✅ Team features</li>
            </ul>
            <div class="d-grid">
              <a href="#" class="btn btn-light text-primary fw-bold">Get Started</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

10. Common Mistakes

  • Using m-auto on inline elements: margin: auto only works on block-level elements with a defined width.
  • Excessive padding on small screens: Use responsive spacing — py-3 py-md-5 — so content doesn't feel cramped on mobile.

11. MCQs

Question 1

What is Bootstrap's spacing value for size 3?

Question 2

What class adds 1.5rem padding on all sides?

Question 3

What class centers a block element horizontally?

Question 4

What class adds margin only on the left?

Question 5

What class makes an element 100% of the viewport height?

Question 6

What py-3 py-md-5 means?

Question 7

What class gives 50% width?

Question 8

What class adds equal gap between flex children?

Question 9

What class adds negative top margin?

Question 10

px-4 applies?

12. Interview Questions

  • Q: What spacing scale does Bootstrap 5 use? What real pixel values does it produce?
  • Q: How do you center a block element with a fixed width using Bootstrap?

13. Summary

Bootstrap's spacing utilities — m (margin) and p (padding) with side modifiers and responsive breakpoints — provide a consistent spatial system for every layout. Combined with width/height utilities, you can position and size any element without writing custom CSS.

14. Next Chapter Recommendation

In Chapter 7: Bootstrap Buttons, we explore Bootstrap's full button system — variants, sizes, states, groups, and interactive features that make CTAs and controls look professional.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Colors, Backgrounds, and Borders
Next Chapter Bootstrap Buttons

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1