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.

Go further, travel better

Travel insurance and car rental can be added in a single click.

<div class="bg-body-tertiary border rounded-4 p-2 p-sm-3 p-lg-5">
  <h3 class="h6">Go further, travel better</h3>
  <p class="small mb-0">Travel insurance and car rental can be added in a single click.</p>
</div>

9Vertical rhythm

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

Beach

Weekends you will talk about for years

Clear prices, honest advice and no surprises along the way.

Learn more

<div>
  <div class="text-primary small fw-semibold mb-1">
    Beach
  </div>
  <h3 class="h4 fw-bold mb-2">Weekends you will talk about for years</h3>
  <p class="text-body-secondary mb-4">Clear prices, honest advice and no surprises along the 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.

How to pack for two weeks with one bag

default margins

How to pack for two weeks with one bag

mb-0

<div class="row g-2">
  <div class="col-6">
    <div class="border rounded-3 p-2">
      <h3 class="h6">How to pack for two weeks with one bag</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">How to pack for two weeks with one bag</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.

Travel insurance Active Jan 14, 2026

<div class="d-flex align-items-center border rounded-3 px-3 py-2">
  <span class="fw-semibold">Travel insurance</span> <span class="badge text-bg-success ms-2">Active</span> <span class="ms-auto small text-body-secondary">Jan 14, 2026</span> 
</div>

13Margin top auto

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

The best time of year to visit Japan

Friendly people answer your questions quickly, by phone, chat or email.

$45.48Details

<div class="d-flex flex-column border rounded-3 p-3" style="height:170px;max-width:18rem">
  <div class="fw-semibold">
    The best time of year to visit Japan
  </div>
  <div class="small text-body-secondary">
    Friendly people answer your questions quickly, by phone, chat or email.
  </div>
  <div class="mt-auto d-flex justify-content-between small">
    <span>$45.48</span><a href="#">Details</a>
  </div>
</div>

14Row and column gap

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

Curated stays Best price guarantee Curated stays Flexible dates

<div class="d-flex flex-wrap row-gap-3 column-gap-5">
  <span><i class="bi bi-check2" aria-hidden="true"></i> Curated stays</span><span><i class="bi bi-check2" aria-hidden="true"></i> Best price guarantee</span><span><i class="bi bi-check2" aria-hidden="true"></i> Curated stays</span><span><i class="bi bi-check2" aria-hidden="true"></i> Flexible dates</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="Zoe Carter">
  </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="Edinburgh">
  </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.

Explore more, worry less

Members get room upgrades and late check-out at selected hotels.

<section class="bg-body-tertiary rounded-4 py-4 py-md-5 px-3 text-center">
  <h3 class="h4 fw-bold mb-2">Explore more, worry less</h3>
  <p class="text-body-secondary mb-0 mx-auto" style="max-width:30rem">Members get room upgrades and late check-out at selected hotels.</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" aria-hidden="true"></i> Home</li>
  <li class="py-2 border-bottom"><i class="bi bi-bag" aria-hidden="true"></i> Orders</li>
  <li class="py-2"><i class="bi bi-person" aria-hidden="true"></i> Account</li>
</ul>