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.
Learn from the best, meet the rest
Start in minutes and get help from a real person whenever you need it.
<div class="bg-body-tertiary border rounded-4 p-2 p-sm-3 p-lg-5">
<h3 class="h6">Learn from the best, meet the rest</h3>
<p class="small mb-0">Start in minutes and get help from a real person whenever you need it.</p>
</div>9Vertical rhythm
mb-1 under the eyebrow, mb-2 under the heading, mb-4 under the paragraph.
Workshop
Three days that change how you work
The venue is a short walk from the station and fully accessible.
Learn more<div>
<div class="text-primary small fw-semibold mb-1">
Workshop
</div>
<h3 class="h4 fw-bold mb-2">Three days that change how you work</h3>
<p class="text-body-secondary mb-4">The venue is a short walk from the station and fully accessible.</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.
What we learned from last year's feedback
default margins
What we learned from last year's feedback
mb-0
<div class="row g-2">
<div class="col-6">
<div class="border rounded-3 p-2">
<h3 class="h6">What we learned from last year's feedback</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">What we learned from last year's feedback</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.
Networking app
Pending
Oct 7, 2026
<div class="d-flex align-items-center border rounded-3 px-3 py-2">
<span class="fw-semibold">Networking app</span> <span class="badge text-bg-success ms-2">Pending</span> <span class="ms-auto small text-body-secondary">Oct 7, 2026</span>
</div>13Margin top auto
mt-auto in a flex-column card pushes the footer down.
The small habits that make a big difference
Our team has done this many times, so you never have to guess.
$12.56Details
<div class="d-flex flex-column border rounded-3 p-3" style="height:170px;max-width:18rem">
<div class="fw-semibold">
The small habits that make a big difference
</div>
<div class="small text-body-secondary">
Our team has done this many times, so you never have to guess.
</div>
<div class="mt-auto d-flex justify-content-between small">
<span>$12.56</span><a href="#">Details</a>
</div>
</div>14Row and column gap
row-gap-3 and column-gap-5 on a wrapping flex list.
Networking lounges World-class speakers Mobile agenda Certificates
<div class="d-flex flex-wrap row-gap-3 column-gap-5">
<span><i class="bi bi-check2" aria-hidden="true"></i> Networking lounges</span><span><i class="bi bi-check2" aria-hidden="true"></i> World-class speakers</span><span><i class="bi bi-check2" aria-hidden="true"></i> Mobile agenda</span><span><i class="bi bi-check2" aria-hidden="true"></i> Certificates</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 --bs-gutter-x
Set --bs-gutter-x inline for a custom column gap.
--bs-gutter-x:3remcol-6<div class="row" style="--bs-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">--bs-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="Nora Kowalski">
</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="Barcelona">
</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.
Ideas on stage, connections everywhere
Every detail is handled by people who care about getting it right.
<section class="bg-body-tertiary rounded-4 py-4 py-md-5 px-3 text-center">
<h3 class="h4 fw-bold mb-2">Ideas on stage, connections everywhere</h3>
<p class="text-body-secondary mb-0 mx-auto" style="max-width:30rem">Every detail is handled by people who care about getting it right.</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>