Spacing utilities add margin (m) or padding (p) on all sides, one side (t, e, b, s) or one axis (x, y) with sizes 0 to 5, plus mx-auto and ms-auto for alignment. gap-*, row-gap-* and column-gap-* space flex and grid children, and every class has responsive variants such as p-md-4.
1Padding scale
p-0 to p-5 add padding on all sides; the inner tint shows the padding area.
p-0
p-1
p-2
p-3
p-4
p-5
<div class="d-flex flex-wrap gap-2 align-items-start">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-0">
p-0
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-1">
p-1
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2">
p-2
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-3">
p-3
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-4">
p-4
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-5">
p-5
</div>
</div>2Margin scale
m-0 to m-5 push boxes apart; the grey parent shows the margin.
m-0m-1m-3m-5<div class="d-flex flex-wrap bg-body-secondary rounded-3">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 m-0">
<code class="small">m-0</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 m-1">
<code class="small">m-1</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 m-3">
<code class="small">m-3</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 m-5">
<code class="small">m-5</code>
</div>
</div>3One side at a time
pt, pe, pb, ps and mt, me, mb, ms target a single side.
pt-4
pe-5
pb-4
ps-5
<div class="d-flex flex-wrap gap-2 align-items-start">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small pt-4 px-2">
pt-4
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small pe-5 ps-2">
pe-5
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small pb-4 px-2">
pb-4
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small ps-5 pe-2">
ps-5
</div>
</div>4Horizontal and vertical
px-* and py-* set both sides of one axis, mx-* and my-* for margins.
px-4 py-1
px-1 py-4
px-3 py-3
<div class="d-flex flex-wrap gap-2 align-items-start">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-4 py-1">
px-4 py-1
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-1 py-4">
px-1 py-4
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-3">
px-3 py-3
</div>
</div>5Centre with mx-auto
mx-auto centres a block element that has a width.
mx-auto
<div class="bg-body-tertiary rounded-3 p-2">
<div class="mx-auto bg-body border rounded-3 p-3 text-center small" style="max-width:16rem">
mx-auto
</div>
</div>6Gap in a grid
d-grid with gap-3 spaces rows without margins on the children.
gap-3gap-3gap-3<div class="d-grid gap-3 bg-body-tertiary rounded-3 p-2">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2">
<code class="small">gap-3</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2">
<code class="small">gap-3</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2">
<code class="small">gap-3</code>
</div>
</div>7Gap scale
gap-0 to gap-5 on flex rows.
itemitemitemitemitemitemitemitemitemitemitemitem<div class="d-grid gap-2">
<div class="d-flex gap-0">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
</div>
<div class="d-flex gap-1">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
</div>
<div class="d-flex gap-3">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
</div>
<div class="d-flex gap-5">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small px-3 py-1">
<code class="small">item</code>
</div>
</div>
</div>8Responsive padding
p-2 p-sm-3 p-lg-5: padding grows with the screen.
Ideas worth talking about
Thousands of clients already trust us, and we work hard to keep it that way.
<div class="bg-body-tertiary border rounded-4 p-2 p-sm-3 p-lg-5">
<h3 class="h6">Ideas worth talking about</h3>
<p class="small mb-0">Thousands of clients already trust us, and we work hard to keep it that way.</p>
</div>9Vertical rhythm
mb-1 under the eyebrow, mb-2 under the heading, mb-4 under the paragraph.
Web
Thoughtful design for ambitious companies
Clients stay with us for years because we treat their brand like our own.
Learn more<div>
<div class="text-primary small fw-semibold mb-1">
Web
</div>
<h3 class="h4 fw-bold mb-2">Thoughtful design for ambitious companies</h3>
<p class="text-body-secondary mb-4">Clients stay with us for years because we treat their brand like our own.</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>10Icon spacing
me-1 and me-2 put a little space between an icon and its label.
<div class="d-flex flex-wrap gap-2">
<button type="button" class="btn btn-outline-primary"><span class="me-1"><i class="bi bi-download" aria-hidden="true"></i></span>me-1</button>
<button type="button" class="btn btn-outline-primary"><span class="me-2"><i class="bi bi-download" aria-hidden="true"></i></span>me-2</button>
<button type="button" class="btn btn-outline-primary">ms-2<span class="ms-2"><i class="bi bi-arrow-right" aria-hidden="true"></i></span></button>
</div>11Remove default margins
mb-0 on headings and paragraphs removes their bottom margin in tight cards.
A beginner's guide to getting started
default margins
A beginner's guide to getting started
mb-0
<div class="row g-2">
<div class="col-6">
<div class="border rounded-3 p-2">
<h3 class="h6">A beginner's guide to getting started</h3>
<p class="small">default margins</p>
</div>
</div>
<div class="col-6">
<div class="border rounded-3 p-2">
<h3 class="h6 mb-0">A beginner's guide to getting started</h3>
<p class="small mb-0">mb-0</p>
</div>
</div>
</div>12Push with ms-auto
ms-auto in a flex row pushes the last item to the end.
Brand identity
Overdue
Dec 7, 2025
<div class="d-flex align-items-center border rounded-3 px-3 py-2">
<span class="fw-semibold">Brand identity</span> <span class="badge text-bg-success ms-2">Overdue</span> <span class="ms-auto small text-body-secondary">Dec 7, 2025</span>
</div>13Margin top auto
mt-auto in a flex-column card pushes the footer down.
Five things we learned this year
Every project starts with a workshop, so we understand your audience before we design.
$62.74Details
<div class="d-flex flex-column border rounded-3 p-3" style="height:170px;max-width:18rem">
<div class="fw-semibold">
Five things we learned this year
</div>
<div class="small text-body-secondary">
Every project starts with a workshop, so we understand your audience before we design.
</div>
<div class="mt-auto d-flex justify-content-between small">
<span>$62.74</span><a href="#">Details</a>
</div>
</div>14Row and column gap
row-gap-3 and column-gap-5 on a wrapping flex list.
Global clients Global clients Global clients Global clients
<div class="d-flex flex-wrap row-gap-3 column-gap-5">
<span><i class="bi bi-check2" aria-hidden="true"></i> Global clients</span><span><i class="bi bi-check2" aria-hidden="true"></i> Global clients</span><span><i class="bi bi-check2" aria-hidden="true"></i> Global clients</span><span><i class="bi bi-check2" aria-hidden="true"></i> Global clients</span>
</div>15Grid gutters
g-0 to g-5 on a row set the gutter between columns.
colcolcolcolcolcolcolcolcol<div class="d-grid gap-3">
<div class="row g-0">
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
</div>
<div class="row g-2">
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
</div>
<div class="row g-4">
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
<div class="col-4">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col</code>
</div>
</div>
</div>
</div>16Gutter via --ui-gutter-x
Set --ui-gutter-x inline for a custom column gap.
--ui-gutter-x:3remcol-6<div class="row" style="--ui-gutter-x:3rem">
<div class="col-6">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">--ui-gutter-x:3rem</code>
</div>
</div>
<div class="col-6">
<div class="bg-primary-subtle border border-primary-subtle rounded-1 small p-2 text-center">
<code class="small">col-6</code>
</div>
</div>
</div>17Form spacing
mb-3 between fields and a larger mt-4 before the actions.
<div style="max-width:22rem">
<div class="mb-3">
<label class="form-label" for="ut-full-1259">Full name</label>
<input id="ut-full-1259" type="text" class="form-control" value="Amara Tanaka">
</div>
<div class="mb-3">
<label class="form-label" for="ut-city-1260">City</label>
<input id="ut-city-1260" type="text" class="form-control" value="Montreal">
</div>
<div class="mt-4 d-flex gap-2">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-light border">Cancel</button>
</div>
</div>18Section padding
py-4 py-md-5 for page sections, px-3 for side breathing room.
Make your next launch unforgettable
Small teams, short feedback loops and no handoffs lost in translation.
<section class="bg-body-tertiary rounded-4 py-4 py-md-5 px-3 text-center">
<h3 class="h4 fw-bold mb-2">Make your next launch unforgettable</h3>
<p class="text-body-secondary mb-0 mx-auto" style="max-width:30rem">Small teams, short feedback loops and no handoffs lost in translation.</p>
</section>19Nested spacing
Outer p-4, inner p-3, innermost p-2: nested panels with clear steps.
p-4 / p-3 / p-2
<div class="border rounded-4 p-4 bg-body-tertiary">
<div class="border rounded-3 p-3 bg-body">
<div class="border rounded-2 p-2 bg-primary-subtle small">
p-4 / p-3 / p-2
</div>
</div>
</div>20List spacing
py-2 on list items with a border between them gives a comfortable touch target.
- Home
- Orders
- Account
<ul class="list-unstyled mb-0 border rounded-3 px-3" style="max-width:20rem">
<li class="py-2 border-bottom"><i class="bi bi-house-fill" aria-hidden="true"></i> Home</li>
<li class="py-2 border-bottom"><i class="bi bi-bag-fill" aria-hidden="true"></i> Orders</li>
<li class="py-2"><i class="bi bi-person-fill" aria-hidden="true"></i> Account</li>
</ul>