Spacing

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-0

m-1

m-3

m-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-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.

item

<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.

Join a community that cares

Every donation is tax-deductible, and receipts arrive by email instantly.

<div class="bg-body-tertiary border rounded-4 p-2 p-sm-3 p-lg-5">
  <h3 class="h6">Join a community that cares</h3>
  <p class="small mb-0">Every donation is tax-deductible, and receipts arrive by email instantly.</p>
</div>

9Vertical rhythm

mb-1 under the eyebrow, mb-2 under the heading, mb-4 under the paragraph.

Animals

Hope starts with you

Thousands of donors already trust us, and we work hard to keep it that way.

Learn more

<div>
  <div class="text-primary small fw-semibold mb-1">
    Animals
  </div>
  <h3 class="h4 fw-bold mb-2">Hope starts with you</h3>
  <p class="text-body-secondary mb-4">Thousands of donors already trust us, and we work hard to keep it that way.</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 day in the life of a volunteer

default margins

A day in the life of a volunteer

mb-0

<div class="row g-2">
  <div class="col-6">
    <div class="border rounded-3 p-2">
      <h3 class="h6">A day in the life of a volunteer</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 day in the life of a volunteer</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.

Food relief Shipped Oct 15, 2026

<div class="d-flex align-items-center border rounded-3 px-3 py-2">
  <span class="fw-semibold">Food relief</span> <span class="badge text-bg-success ms-2">Shipped</span> <span class="ms-auto small text-body-secondary">Oct 15, 2026</span> 
</div>

13Margin top auto

mt-auto in a flex-column card pushes the footer down.

Stories from the families we support

Our annual report is independently audited and published in full.

$18.93Details

<div class="d-flex flex-column border rounded-3 p-3" style="height:170px;max-width:18rem">
  <div class="fw-semibold">
    Stories from the families we support
  </div>
  <div class="small text-body-secondary">
    Our annual report is independently audited and published in full.
  </div>
  <div class="mt-auto d-flex justify-content-between small">
    <span>$18.93</span><a href="#">Details</a>
  </div>
</div>

14Row and column gap

row-gap-3 and column-gap-5 on a wrapping flex list.

Transparent reports Volunteer network Impact tracking Secure giving

<div class="d-flex flex-wrap row-gap-3 column-gap-5">
  <span><i class="bi bi-check2" aria-hidden="true"></i> Transparent reports</span><span><i class="bi bi-check2" aria-hidden="true"></i> Volunteer network</span><span><i class="bi bi-check2" aria-hidden="true"></i> Impact tracking</span><span><i class="bi bi-check2" aria-hidden="true"></i> Secure giving</span> 
</div>

15Grid gutters

g-0 to g-5 on a row set the gutter between columns.

col

<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:3rem

col-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.

Full name

City

<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="Mason Nguyen">
  </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.

Small acts, big impact

Companies can match employee donations and double their impact.

<section class="bg-body-tertiary rounded-4 py-4 py-md-5 px-3 text-center">
  <h3 class="h4 fw-bold mb-2">Small acts, big impact</h3>
  <p class="text-body-secondary mb-0 mx-auto" style="max-width:30rem">Companies can match employee donations and double their impact.</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>