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.

Together we can change lives

Our team has done this many times, so you never have to guess.

<div class="bg-body-tertiary border rounded-4 p-2 p-sm-3 p-lg-5">
  <h3 class="h6">Together we can change lives</h3>
  <p class="small mb-0">Our team has done this many times, so you never have to guess.</p>
</div>

9Vertical rhythm

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

Environment

Real help, where it is needed most

Start in minutes and get help from a real person whenever you need it.

Learn more

<div>
  <div class="text-primary small fw-semibold mb-1">
    Environment
  </div>
  <h3 class="h4 fw-bold mb-2">Real help, where it is needed most</h3>
  <p class="text-body-secondary mb-4">Start in minutes and get help from a real person whenever you need it.</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.

Why we plant trees with the schools we build

default margins

Why we plant trees with the schools we build

mb-0

<div class="row g-2">
  <div class="col-6">
    <div class="border rounded-3 p-2">
      <h3 class="h6">Why we plant trees with the schools we build</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">Why we plant trees with the schools we build</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.

Disaster response On hold Nov 13, 2025

<div class="d-flex align-items-center border rounded-3 px-3 py-2">
  <span class="fw-semibold">Disaster response</span> <span class="badge text-bg-success ms-2">On hold</span> <span class="ms-auto small text-body-secondary">Nov 13, 2025</span> 
</div>

13Margin top auto

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

Five things we learned this year

Our annual report is independently audited and published in full.

$11.94Details

<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">
    Our annual report is independently audited and published in full.
  </div>
  <div class="mt-auto d-flex justify-content-between small">
    <span>$11.94</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 Volunteer network

<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> Volunteer network</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 --bs-gutter-x

Set --bs-gutter-x inline for a custom column gap.

--bs-gutter-x:3rem

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

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="Omar 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="Dublin">
  </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.

Change one life, change a community

A school kit costs less than a cinema ticket and lasts a whole year.

<section class="bg-body-tertiary rounded-4 py-4 py-md-5 px-3 text-center">
  <h3 class="h4 fw-bold mb-2">Change one life, change a community</h3>
  <p class="text-body-secondary mb-0 mx-auto" style="max-width:30rem">A school kit costs less than a cinema ticket and lasts a whole year.</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>