Spacing and Sizing Utilities

A huge share of the custom CSS people write is just "add some space here" or "make this element a certain width." Bootstrap covers both with short, predictable utility classes.

Reading a spacing class

Spacing classes follow a consistent pattern: {property}{sides}-{size}.

<div class="mt-3 mb-4 px-2">
  Margin-top 3, margin-bottom 4, padding-left and right 2.
</div>

• Property: m for margin, p for padding.
• Sides: t (top), b (bottom), s (start/left), e (end/right), x (left+right), y (top+bottom), or nothing for all four sides.
• Size: 0 through 5, each step roughly 0.25rem more than the last (so 3 is 1rem, 4 is 1.5rem, and so on), plus auto for margins.

So mt-3 is "margin-top, size 3," and px-2 is "padding-left and padding-right, size 2." Once you know this pattern, you can read almost any spacing class you encounter without looking it up.

<div class="d-flex justify-content-between mb-3">
  <span>Left</span>
  <span>Right</span>
</div>

<button class="btn btn-primary mt-2 me-2">Save</button>
<button class="btn btn-secondary mt-2">Cancel</button>

me-2 between the two buttons adds a small gap so they don't touch — a far more common real-world use of spacing utilities than large layout gaps, which are usually better handled with grid gutters or flexbox gap utilities instead.

Centering with margin: auto

<div class="mx-auto" style="width: 300px;">
  Horizontally centered block
</div>

mx-auto sets left and right margin to auto, the same trick used in plain CSS to center a block-level element that has a fixed width — Bootstrap just saves you from typing it out.

Sizing utilities

<div class="w-50">Half the width of its parent</div>
<div class="w-100">Full width of its parent</div>
<img src="banner.jpg" class="w-100 h-auto" alt="Site banner" />

w-* and h-* set width and height as a percentage of the parent element (25, 50, 75, 100, or auto). w-100 h-auto on an image is a common pattern: it stretches the image to fill its container's width while letting the height scale proportionally, so the image never distorts.

Why this matters more than it looks

It's tempting to dismiss mt-3 as "just inline styles with extra steps," but there's a real advantage: every 3 across your entire site resolves to the exact same value, defined in one place. If you later adjust Bootstrap's spacing scale (covered in the Sass customization lesson), every mt-3, px-3, and gap-3 in your codebase updates together — something a scattered pile of hand-written margin-top: 14px rules could never do consistently.