Most of the CSS you would otherwise write by hand is margin, padding, width and height. Bootstrap's spacing and sizing utilities replace that CSS with short, predictable class names built from a single scale. After this lesson you will read mt-3 px-lg-5 w-100 at a glance and know exactly what it produces.
Spacing classes follow {property}{sides}-{breakpoint}-{size}:
| Part | Values |
|---|---|
| property | m (margin), p (padding) |
| sides | t top, b bottom, s start (left in LTR), e end (right in LTR), x left and right, y top and bottom, blank for all four |
| breakpoint | none, sm, md, lg, xl, xxl |
| size | 0, 1, 2, 3, 4, 5, auto (margin only) |
The size numbers map to the $spacer variable (1rem by default):
| Size | Value | |---|---| | 0 | 0 | | 1 | 0.25rem (4px) | | 2 | 0.5rem (8px) | | 3 | 1rem (16px) | | 4 | 1.5rem (24px) | | 5 | 3rem (48px) |
Bootstrap 5 uses s and e instead of l and r so that the classes flip automatically in right-to-left layouts.
<div class="mt-3 mb-5 px-2 py-4">margin-top 1rem, margin-bottom 3rem, padding 0.5rem sides, 1.5rem top and bottom</div>
<div class="p-2 p-md-4 p-xl-5">Padding grows with the viewport</div>Negative margin classes exist in the Sass source but are disabled by default. Enable them by setting $enable-negative-margins: true before importing Bootstrap, then use mt-n3, mx-n2 and so on. They are useful for pulling an element over a border or cancelling a parent's padding.
mx-automx-auto sets both horizontal margins to auto, which centers a block element that has a defined width:
<div class="mx-auto bg-light p-3" style="width: 240px">Centered box</div>
<img src="logo.svg" class="d-block mx-auto" width="96" alt="">Inside a flex container, ms-auto or me-auto on one child pushes it to the far side, which is how a navbar keeps its login button on the right.
Instead of adding margins to each child, put gap-{size} on a flex or grid parent. It uses the same 0 to 5 scale and never creates a stray margin on the last item:
<div class="d-flex flex-wrap gap-2">
<span class="badge text-bg-primary">Design</span>
<span class="badge text-bg-primary">Frontend</span>
<span class="badge text-bg-primary">Accessibility</span>
</div>row-gap-* and column-gap-* control one axis only. Note that gap-* does nothing on a display: block element.
Sizing utilities are relative to the parent:
| Class | CSS |
|---|---|
| w-25, w-50, w-75, w-100, w-auto | width: 25% etc. |
| h-25, h-50, h-75, h-100, h-auto | height: 25% etc. |
| mw-100 | max-width: 100% |
| mh-100 | max-height: 100% |
| vw-100, vh-100 | width: 100vw, height: 100vh |
| min-vw-100, min-vh-100 | min-width/min-height of the viewport |
<div class="d-flex align-items-center justify-content-center min-vh-100">
<div class="card p-4 w-100" style="max-width: 420px">Login form centered on the page</div>
</div>h-100 only works when the parent has an explicit height. The common case is a card inside a grid column: .row stretches its columns to equal height, so card h-100 fills that stretched column.
Sizing utilities are not responsive by default. If you need w-md-50, extend the utility API (covered later in the course) or write one line of CSS.
The spacing scale comes from the $spacers Sass map. Add a step and every m-*, p-*, gap-* and g-* class picks it up:
$spacers: (
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 1rem,
4: 1.5rem,
5: 3rem,
6: 4.5rem,
7: 6rem
);
@import "bootstrap/scss/bootstrap";ml-/mr- from Bootstrap 4. They were renamed to ms-/me- in version 5 and no longer exist.mt-* on the first child of a card body. Cards already provide padding; stacking margins doubles the space.h-100 to fill the page. Use min-vh-100 on the wrapper; h-100 needs a sized parent.w-md-50. Sizing utilities have no responsive variants unless you generate them.What does the class `py-4` set?
{m|p}{t|b|s|e|x|y}-{breakpoint}-{0-5|auto} and use a 0.25rem to 3rem scale based on $spacer.s/e replace l/r so layouts work in RTL; mx-auto centers sized block elements.gap-* on a flex or grid parent spaces children without leftover margins.w-*, h-*, vw-100, vh-100 and min-vh-100 handle sizing; h-100 needs a sized parent.$spacers in Sass to add steps to every spacing-based utility at once.Next lesson: Display, Visibility and Position Utilities - show and hide elements per breakpoint and control positioning with sticky, fixed and absolute helpers.