Utilities
Spacing
Margin, padding, gap, and flow utilities on a consistent scale.
Spacing utilities follow a shared scale. Apply them to any element; add a breakpoint segment (sm, md, lg, xl, xxl) for responsive variants.
The scale
| Step | Value | Step | Value |
|---|---|---|---|
0 | 0 | 5 | 3rem |
px | 1px | 6 | 4.5rem |
1 | 0.25rem | 7 | 6rem |
2 | 0.5rem | 8 | 7.5rem |
3 | 1rem | 9 | 9rem |
4 | 1.5rem | 10 | 12rem |
Margin & padding
{m|p}{side}-{step} — side is t, b, s (start), e (end), x, y, or none:
<div class="mt-3 mb-4">Margin-top 1rem, margin-bottom 1.5rem</div>
<div class="px-4 py-2">1.5rem horizontal, 0.5rem vertical padding</div>
<div class="m-0 p-5">Reset margin, 3rem padding</div>
<div class="mx-auto">Horizontally centered block</div>
Responsive:
<div class="p-2 p-md-4 p-xl-5">Padding grows with the viewport</div>
Gap (flex & grid)
gap-{0–10}, plus axis-specific gap-inline-* / gap-block-*:
<div class="d-flex gap-3">…</div>
<div class="d-grid gap-inline-4 gap-block-2">…</div>
Flow & sections
flow-{step}— adds top margin between sibling children (> * + *); great for prose.block-spacing-{step}— vertical section padding with scroll-margin for anchored sections.mt-section(+mt-section-sm/-md/-lg/-xl) — semantic top spacing for content hierarchy.
<article class="flow-3">
<h2>Heading</h2>
<p>Sibling elements get even vertical rhythm automatically…</p>
<p>…with no per-child margins.</p>
</article>
Custom hooks
mt-custom / mb-custom / px-custom (etc.) read from --_margin / --_padding, so you can drive spacing from a CSS variable.