Stacks

Stacks are flexbox shortcuts: vstack lines items up vertically, hstack horizontally, and the gap utilities space them evenly. Push an item to the far side with ms-auto and separate groups with a vertical rule.

1Horizontal toolbar

hstack with gap-2 lines up buttons; ms-auto pushes the last group to the far end.

<div class="hstack gap-2 p-2 border rounded bg-body-tertiary">
  <button type="button" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg" aria-hidden="true"></i> New</button>
  <button type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-upload" aria-hidden="true"></i> Import</button>
  <div class="vr">
  </div>
  <button type="button" class="btn btn-sm btn-light" aria-label="Filter"><i class="bi bi-funnel-fill" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-sm btn-light ms-auto" aria-label="Settings"><i class="bi bi-gear-fill" aria-hidden="true"></i></button>
</div>

2Vertical sign-in form

vstack with gap-3 spaces the fields of a compact form without margin utilities.

<form class="vstack gap-3" style="max-width:22rem">
  <div>
    <label class="form-label" for="hp-email-1236">Email</label>
    <input class="form-control" id="hp-email-1236" type="email" autocomplete="email">
  </div>
  <div>
    <label class="form-label" for="hp-pass-1237">Password</label>
    <input class="form-control" id="hp-pass-1237" type="password" autocomplete="current-password">
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
  <a class="small text-center" href="#">Forgot your password?</a> 
</form>

3Profile row

An avatar, a name and role block and a follow button in one hstack.

Elena Tanaka HR Partner · Porto

<div class="hstack gap-3 p-3 border rounded">
  <img src="../assets/img/avatar-10.svg" alt="Elena Tanaka" width="48" height="48" class="rounded-circle"> 
  <div class="vstack gap-0">
    <strong>Elena Tanaka</strong> <small class="text-body-secondary">HR Partner &middot; Porto</small> 
  </div>
  <button type="button" class="btn btn-sm btn-outline-primary ms-auto">Follow</button>
</div>

4Notification list

A vstack of notification items, each an hstack of icon, message and time.

The new sustainable materials makes every detail in view at a fair price.

1 days ago

This friendly team lets every detail in view at a fair price.

yesterday

Our secure checkout brings your work organised with friendly support.

just now

<div class="vstack gap-2">
  <div class="hstack gap-3 align-items-start p-2 border rounded">
    <span class="text-success fs-5"><i class="bi bi-bag-check-fill" aria-hidden="true"></i></span>
    <div class="small">
      The new sustainable materials makes every detail in view at a fair price.
    </div>
    <small class="ms-auto text-nowrap text-body-secondary">1 days ago</small>
  </div>
  <div class="hstack gap-3 align-items-start p-2 border rounded">
    <span class="text-primary fs-5"><i class="bi bi-chat-left-text-fill" aria-hidden="true"></i></span>
    <div class="small">
      This friendly team lets every detail in view at a fair price.
    </div>
    <small class="ms-auto text-nowrap text-body-secondary">yesterday</small>
  </div>
  <div class="hstack gap-3 align-items-start p-2 border rounded">
    <span class="text-warning fs-5"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i></span>
    <div class="small">
      Our secure checkout brings your work organised with friendly support.
    </div>
    <small class="ms-auto text-nowrap text-body-secondary">just now</small>
  </div>
</div>

5Centred button stack

vstack with col-md-5 mx-auto centres full-width buttons, as on a mobile landing screen.

Free for 30 days, no card needed

<div class="vstack gap-2 col-md-5 mx-auto">
  <button type="button" class="btn btn-primary">Create an account</button>
  <button type="button" class="btn btn-outline-secondary">I already have one</button>
  <small class="text-center text-body-secondary">Free for 30 days, no card needed</small> 
</div>

6Stacked feature cards

Cards stacked with vstack gap-3; inside each card an hstack pairs the icon with its text.

Secure payments

Our loyalty rewards shows decisions quicker and clearer on any device.

Secure payments

Our 30-day returns makes customers coming back in just a few clicks.

Hand-checked quality

The new easy exchanges brings time back in your day all year round.

<div class="vstack gap-3">
  <div class="card">
    <div class="card-body hstack gap-3">
      <span class="fs-3 text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Secure payments</h3>
        <p class="small mb-0">Our loyalty rewards shows decisions quicker and clearer on any device.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body hstack gap-3">
      <span class="fs-3 text-primary"><i class="bi bi-graph-up" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Secure payments</h3>
        <p class="small mb-0">Our 30-day returns makes customers coming back in just a few clicks.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body hstack gap-3">
      <span class="fs-3 text-primary"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Hand-checked quality</h3>
        <p class="small mb-0">The new easy exchanges brings time back in your day all year round.</p>
      </div>
    </div>
  </div>
</div>

7Inline subscribe form

An hstack holding an input, a button and a divider link, a common newsletter pattern.

<form class="hstack gap-2">
  <label class="visually-hidden" for="hp-q-1238">Email address</label>
  <input class="form-control me-auto" id="hp-q-1238" type="email" placeholder="you@example.com"> 
  <button type="submit" class="btn btn-secondary">Subscribe</button>
  <div class="vr">
  </div>
  <button type="reset" class="btn btn-outline-danger">Reset</button>
</form>

8Pricing feature list

A vstack of check-mark rows inside a pricing card.

Business

$37.71 / month

Easy exchanges

Sustainable materials

Carbon-neutral delivery

Secure payments

Hand-checked quality

<div class="card" style="max-width:22rem">
  <div class="card-body vstack gap-2">
    <h3 class="h5 mb-0">Business</h3>
    <p class="fs-3 fw-bold mb-1">$37.71<small class="fs-6 fw-normal text-body-secondary"> / month</small></p>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Easy exchanges
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Sustainable materials
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Carbon-neutral delivery
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Secure payments
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Hand-checked quality
    </div>
    <button type="button" class="btn btn-primary mt-2">Choose plan</button>
  </div>
</div>

9Footer link row

hstack with flex-wrap and gap-3 for a row of footer links that wraps on narrow screens.

<footer class="hstack flex-wrap gap-3 small border-top pt-3">
  <span class="fw-semibold">Brand name 17</span> <a href="#">About</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Help centre</a> <span class="ms-auto text-body-secondary">&copy; 2026</span> 
</footer>

10Chat bubbles

A vstack where align-self-start and align-self-end place incoming and outgoing messages.

A secure release guides complex tasks into simple steps at a fair price.

This practical community makes you focused on what matters at a fair price.

Our live order tracking helps you focused on what matters wherever you are.

Our gift wrapping turns data easy to understand with friendly support.

<div class="vstack gap-2">
  <div class="px-3 py-2 rounded-3 small bg-body-tertiary align-self-start" style="max-width:80%">
    A secure release guides complex tasks into simple steps at a fair price.
  </div>
  <div class="px-3 py-2 rounded-3 small text-bg-primary align-self-end" style="max-width:80%">
    This practical community makes you focused on what matters at a fair price.
  </div>
  <div class="px-3 py-2 rounded-3 small bg-body-tertiary align-self-start" style="max-width:80%">
    Our live order tracking helps you focused on what matters wherever you are.
  </div>
  <div class="px-3 py-2 rounded-3 small text-bg-primary align-self-end" style="max-width:80%">
    Our gift wrapping turns data easy to understand with friendly support.
  </div>
</div>

11Wrapping tag row

hstack plus flex-wrap and gap-1 keeps tags tidy when they run onto a second line.

OutdoorHomeAccessoriesApparelBeauty

<div class="hstack flex-wrap gap-1">
  <span class="badge rounded-pill text-bg-light border">Outdoor</span><span class="badge rounded-pill text-bg-light border">Home</span><span class="badge rounded-pill text-bg-light border">Accessories</span><span class="badge rounded-pill text-bg-light border">Apparel</span><span class="badge rounded-pill text-bg-light border">Beauty</span>
</div>

12Settings rows

Each setting is an hstack with the label on the left and a switch pushed right with ms-auto.

Email notifications

Dark mode

<div class="vstack border rounded">
  <div class="hstack gap-3 p-3 border-bottom">
    <span class="fs-5 text-primary"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span> 
    <label class="form-check-label" for="hp-switch-1239">Email notifications</label>
    <div class="form-check form-switch ms-auto mb-0">
      <input class="form-check-input" type="checkbox" role="switch" id="hp-switch-1239" checked>
    </div>
  </div>
  <div class="hstack gap-3 p-3">
    <span class="fs-5 text-primary"><i class="bi bi-moon-stars" aria-hidden="true"></i></span> 
    <label class="form-check-label" for="hp-switch-1240">Dark mode</label>
    <div class="form-check form-switch ms-auto mb-0">
      <input class="form-check-input" type="checkbox" role="switch" id="hp-switch-1240">
    </div>
  </div>
</div>

13Stats with dividers

An hstack of figures separated by vertical rules.

2.1k

Clients

118

Projects

4.6

Rating

<div class="hstack gap-3 gap-md-4 p-3 border rounded justify-content-center text-center">
  <div>
    <div class="fs-4 fw-bold">
      2.1k
    </div>
    <small class="text-body-secondary">Clients</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="fs-4 fw-bold">
      118
    </div>
    <small class="text-body-secondary">Projects</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="fs-4 fw-bold">
      4.6
    </div>
    <small class="text-body-secondary">Rating</small>
  </div>
</div>

14Card meta line

An hstack in a card footer for author, date and a like counter.

Inside the flexible experience

Our 30-day returns makes time back in your day all year round.

Finn Haddad·Jun 1, 2026 136

<div class="card" style="max-width:24rem">
  <div class="card-body">
    <h3 class="h6">Inside the flexible experience</h3>
    <p class="small mb-0">Our 30-day returns makes time back in your day all year round.</p>
  </div>
  <div class="card-footer hstack gap-2 small text-body-secondary">
    <img src="../assets/img/avatar-2.svg" alt="" width="24" height="24" class="rounded-circle"> <span>Finn Haddad</span><span>&middot;</span><span>Jun 1, 2026</span> <span class="ms-auto"><i class="bi bi-heart-fill" aria-hidden="true"></i> 136</span> 
  </div>
</div>

15Order timeline

A vstack of steps, each an hstack of status badge and text.

Order placedApr 30, 2026

PackedOct 19, 2025

ShippedSep 12, 2026

DeliveredExpected Jan 13, 2027

<div class="vstack gap-3">
  <div class="hstack gap-3">
    <span class="badge rounded-pill text-bg-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>
    <div class="vstack">
      <strong class="small">Order placed</strong><small class="text-body-secondary">Apr 30, 2026</small>
    </div>
  </div>
  <div class="hstack gap-3">
    <span class="badge rounded-pill text-bg-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>
    <div class="vstack">
      <strong class="small">Packed</strong><small class="text-body-secondary">Oct 19, 2025</small>
    </div>
  </div>
  <div class="hstack gap-3">
    <span class="badge rounded-pill text-bg-success"><i class="bi bi-check-lg" aria-hidden="true"></i></span>
    <div class="vstack">
      <strong class="small">Shipped</strong><small class="text-body-secondary">Sep 12, 2026</small>
    </div>
  </div>
  <div class="hstack gap-3">
    <span class="badge rounded-pill text-bg-secondary"><i class="bi bi-clock-fill" aria-hidden="true"></i></span>
    <div class="vstack">
      <strong class="small">Delivered</strong><small class="text-body-secondary">Expected Jan 13, 2027</small>
    </div>
  </div>
</div>

16Search bar

An hstack combining a search field, a filter select and a button.

<form class="hstack gap-2 flex-wrap flex-sm-nowrap" role="search">
  <label class="visually-hidden" for="hp-search-1241">Search</label>
  <input class="form-control" id="hp-search-1241" type="search" placeholder="Search apparel"> 
  <label class="visually-hidden" for="hp-search-1241-type">Type</label>
  <select class="form-select w-auto" id="hp-search-1241-type">
    <option>All</option>
    <option>Recent</option>
  </select>
  <button type="submit" class="btn btn-primary"><i class="bi bi-search" aria-hidden="true"></i></button>
</form>

17File rows

Attachment rows with icon, name and size, and a download button aligned right.

report-2026.pdf408 KB

proposal-2025.docx419 KB

budget-2025.xlsx618 KB

<div class="vstack gap-2">
  <div class="hstack gap-3 p-2 border rounded">
    <span class="fs-4 text-danger"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span>
    <div class="vstack">
      <span class="small fw-semibold">report-2026.pdf</span><small class="text-body-secondary">408 KB</small>
    </div>
    <button type="button" class="btn btn-sm btn-light ms-auto" aria-label="Download report"><i class="bi bi-download" aria-hidden="true"></i></button>
  </div>
  <div class="hstack gap-3 p-2 border rounded">
    <span class="fs-4 text-primary"><i class="bi bi-filetype-docx" aria-hidden="true"></i></span>
    <div class="vstack">
      <span class="small fw-semibold">proposal-2025.docx</span><small class="text-body-secondary">419 KB</small>
    </div>
    <button type="button" class="btn btn-sm btn-light ms-auto" aria-label="Download proposal"><i class="bi bi-download" aria-hidden="true"></i></button>
  </div>
  <div class="hstack gap-3 p-2 border rounded">
    <span class="fs-4 text-success"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span>
    <div class="vstack">
      <span class="small fw-semibold">budget-2025.xlsx</span><small class="text-body-secondary">618 KB</small>
    </div>
    <button type="button" class="btn btn-sm btn-light ms-auto" aria-label="Download budget"><i class="bi bi-download" aria-hidden="true"></i></button>
  </div>
</div>

18Nested stacks

A vstack page section whose header is an hstack: stacks nest freely.

Loyalty rewards

2 View all

The new member prices shows time back in your day for teams of every size.

<section class="vstack gap-3 p-3 border rounded">
  <div class="hstack gap-2">
    <h3 class="h5 mb-0">Loyalty rewards</h3>
    <span class="badge text-bg-primary">2</span> <a class="ms-auto small" href="#">View all</a> 
  </div>
  <p class="mb-0 small">The new member prices shows time back in your day for teams of every size.</p>
  <div class="hstack gap-2">
    <button type="button" class="btn btn-sm btn-primary">Open</button>
    <button type="button" class="btn btn-sm btn-light">Share</button>
  </div>
</section>

19Gap sizes compared

The same hstack with gap-0, gap-2 and gap-4 to compare spacing.

gap-0

Item

gap-2

Item

gap-4

Item

<div class="vstack gap-3">
  <div>
    <small class="text-body-secondary">gap-0</small>
    <div class="hstack gap-0">
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
    </div>
  </div>
  <div>
    <small class="text-body-secondary">gap-2</small>
    <div class="hstack gap-2">
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
    </div>
  </div>
  <div>
    <small class="text-body-secondary">gap-4</small>
    <div class="hstack gap-4">
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary-subtle rounded small">
        Item
      </div>
    </div>
  </div>
</div>

20Responsive stack direction

Stacks are vertical on phones and switch to a row from md with flex-md-row.

PlanThis reliable team guides every detail in view with friendly support.

BuildThis focused workflow guides you focused on what matters for teams of every size.

LaunchThe new sustainable materials helps decisions quicker and clearer on any device.

<div class="vstack flex-md-row gap-3">
  <div class="p-3 border rounded flex-fill">
    <strong class="d-block"><i class="bi bi-pencil-fill" aria-hidden="true"></i> Plan</strong><small>This reliable team guides every detail in view with friendly support.</small>
  </div>
  <div class="p-3 border rounded flex-fill">
    <strong class="d-block"><i class="bi bi-hammer" aria-hidden="true"></i> Build</strong><small>This focused workflow guides you focused on what matters for teams of every size.</small>
  </div>
  <div class="p-3 border rounded flex-fill">
    <strong class="d-block"><i class="bi bi-rocket-takeoff-fill" aria-hidden="true"></i> Launch</strong><small>The new sustainable materials helps decisions quicker and clearer on any device.</small>
  </div>
</div>