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.

Freya Delgado HR Partner · Barcelona

<div class="hstack gap-3 p-3 border rounded">
  <img src="../assets/img/avatar-8.svg" alt="Freya Delgado" width="48" height="48" class="rounded-circle"> 
  <div class="vstack gap-0">
    <strong>Freya Delgado</strong> <small class="text-body-secondary">HR Partner &middot; Barcelona</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.

Order for pickup or delivery and enjoy the same dishes at home.

6 hours ago

We keep things simple, so you can focus on what matters to you.

9 hours ago

Book a table online in seconds, or call us for groups of eight or more.

19 hours ago

<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">
      Order for pickup or delivery and enjoy the same dishes at home.
    </div>
    <small class="ms-auto text-nowrap text-body-secondary">6 hours 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">
      We keep things simple, so you can focus on what matters to you.
    </div>
    <small class="ms-auto text-nowrap text-body-secondary">9 hours ago</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">
      Book a table online in seconds, or call us for groups of eight or more.
    </div>
    <small class="ms-auto text-nowrap text-body-secondary">19 hours ago</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 7 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 7 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.

Local ingredients

We listen first, then build a plan around what you actually need.

Kid friendly

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

Online reservations

Bread is baked every morning and pasta is rolled by hand in our kitchen.

<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-lightning-fill" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Local ingredients</h3>
        <p class="small mb-0">We listen first, then build a plan around what you actually need.</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">Kid friendly</h3>
        <p class="small mb-0">Thousands of guests already trust us, and we work hard to keep it that way.</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">Online reservations</h3>
        <p class="small mb-0">Bread is baked every morning and pasta is rolled by hand in our kitchen.</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

$89.55 / month

Vegan options

Online reservations

Kid friendly

Local ingredients

Fast delivery

<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">$89.55<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>Vegan options
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Online reservations
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Kid friendly
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Local ingredients
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Fast delivery
    </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">Koraara Deck</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.

Our menu changes with the seasons and the best produce from nearby farms.

We have been feeding this neighbourhood for over a decade, and we still love it.

Children are always welcome, with a menu made just for them.

Our sommelier has paired each dish with wines from small family vineyards.

<div class="vstack gap-2">
  <div class="px-3 py-2 rounded-3 small bg-body-tertiary align-self-start" style="max-width:80%">
    Our menu changes with the seasons and the best produce from nearby farms.
  </div>
  <div class="px-3 py-2 rounded-3 small text-bg-primary align-self-end" style="max-width:80%">
    We have been feeding this neighbourhood for over a decade, and we still love it.
  </div>
  <div class="px-3 py-2 rounded-3 small bg-body-tertiary align-self-start" style="max-width:80%">
    Children are always welcome, with a menu made just for them.
  </div>
  <div class="px-3 py-2 rounded-3 small text-bg-primary align-self-end" style="max-width:80%">
    Our sommelier has paired each dish with wines from small family vineyards.
  </div>
</div>

11Wrapping tag row

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

SpecialsStartersDrinksMainsDesserts

<div class="hstack flex-wrap gap-1">
  <span class="badge rounded-pill text-bg-light border">Specials</span><span class="badge rounded-pill text-bg-light border">Starters</span><span class="badge rounded-pill text-bg-light border">Drinks</span><span class="badge rounded-pill text-bg-light border">Mains</span><span class="badge rounded-pill text-bg-light border">Desserts</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.

6.6k

Clients

294

Projects

4.9

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">
      6.6k
    </div>
    <small class="text-body-secondary">Clients</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="fs-4 fw-bold">
      294
    </div>
    <small class="text-body-secondary">Projects</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="fs-4 fw-bold">
      4.9
    </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.

What is new on our winter menu

Every detail is handled by people who care about getting it right.

Isla Morgan·Sep 16, 2026 180

<div class="card" style="max-width:24rem">
  <div class="card-body">
    <h3 class="h6">What is new on our winter menu</h3>
    <p class="small mb-0">Every detail is handled by people who care about getting it right.</p>
  </div>
  <div class="card-footer hstack gap-2 small text-body-secondary">
    <img src="../assets/img/avatar-11.svg" alt="" width="24" height="24" class="rounded-circle"> <span>Isla Morgan</span><span>&middot;</span><span>Sep 16, 2026</span> <span class="ms-auto"><i class="bi bi-heart-fill" aria-hidden="true"></i> 180</span> 
  </div>
</div>

15Order timeline

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

Order placedSep 17, 2026

PackedJan 10, 2026

ShippedSep 22, 2025

DeliveredExpected Nov 4, 2026

<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">Sep 17, 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">Jan 10, 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">Shipped</strong><small class="text-body-secondary">Sep 22, 2025</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 Nov 4, 2026</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 drinks"> 
  <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" aria-label="Search"><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.pdf299 KB

proposal-2025.docx486 KB

budget-2026.xlsx561 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">299 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">486 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-2026.xlsx</span><small class="text-body-secondary">561 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.

Wine pairing

11 View all

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

<section class="vstack gap-3 p-3 border rounded">
  <div class="hstack gap-2">
    <h3 class="h5 mb-0">Wine pairing</h3>
    <span class="badge text-bg-primary">11</span> <a class="ms-auto small" href="#">View all</a> 
  </div>
  <p class="mb-0 small">Clear prices, honest advice and no surprises along the way.</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.

PlanChildren are always welcome, with a menu made just for them.

BuildOrder for pickup or delivery and enjoy the same dishes at home.

LaunchThousands of guests already trust us, and we work hard to keep it that way.

<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>Children are always welcome, with a menu made just for them.</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>Order for pickup or delivery and enjoy the same dishes at home.</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>Thousands of guests already trust us, and we work hard to keep it that way.</small>
  </div>
</div>