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-md bg-surface-3">
  <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" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-sm btn-light ms-auto" aria-label="Settings"><i class="bi bi-gear" 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-4" 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.

Chloe Novak Art Director · Montreal

<div class="hstack gap-4 p-4 border rounded-md">
  <img src="../assets/img/avatar-7.svg" alt="Chloe Novak" width="48" height="48" class="rounded-full"> 
  <div class="vstack gap-0">
    <strong>Chloe Novak</strong> <small class="text-muted">Art Director &middot; Montreal</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.

Our physiotherapy brings customers coming back in just a few clicks.

3 days ago

Our physiotherapy helps complex tasks into simple steps without extra tools.

33 min ago

This bright process gives the whole team on the same page on any device.

yesterday

<div class="vstack gap-2">
  <div class="hstack gap-4 items-start p-2 border rounded-md">
    <span class="text-success text-lg"><i class="bi bi-bag-check" aria-hidden="true"></i></span>
    <div class="small">
      Our physiotherapy brings customers coming back in just a few clicks.
    </div>
    <small class="ms-auto whitespace-nowrap text-muted">3 days ago</small>
  </div>
  <div class="hstack gap-4 items-start p-2 border rounded-md">
    <span class="text-primary text-lg"><i class="bi bi-chat-left-text" aria-hidden="true"></i></span>
    <div class="small">
      Our physiotherapy helps complex tasks into simple steps without extra tools.
    </div>
    <small class="ms-auto whitespace-nowrap text-muted">33 min ago</small>
  </div>
  <div class="hstack gap-4 items-start p-2 border rounded-md">
    <span class="text-warning text-lg"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i></span>
    <div class="small">
      This bright process gives the whole team on the same page on any device.
    </div>
    <small class="ms-auto whitespace-nowrap text-muted">yesterday</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 14 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-muted">Free for 14 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.

Certified specialists

This fast team connects data easy to understand on any device.

Online results

A honest project shows projects moving forward without extra tools.

Online results

This practical launch lets results you can measure wherever you are.

<div class="vstack gap-4">
  <div class="card">
    <div class="card-body hstack gap-4">
      <span class="text-2xl text-primary"><i class="bi bi-lightning" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Certified specialists</h3>
        <p class="small mb-0">This fast team connects data easy to understand on any device.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body hstack gap-4">
      <span class="text-2xl text-primary"><i class="bi bi-lightning" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Online results</h3>
        <p class="small mb-0">A honest project shows projects moving forward without extra tools.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body hstack gap-4">
      <span class="text-2xl text-primary"><i class="bi bi-graph-up" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Online results</h3>
        <p class="small mb-0">This practical launch lets results you can measure wherever you are.</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="sr-only" 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

$36.39 / month

Same-day appointments

Insurance friendly

Certified specialists

Online results

Reminders

<div class="card" style="max-width:22rem">
  <div class="card-body vstack gap-2">
    <h3 class="h5 mb-0">Business</h3>
    <p class="text-2xl font-bold mb-1">$36.39<small class="text-base font-normal text-muted"> / month</small></p>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Same-day appointments
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Insurance friendly
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Certified specialists
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Online results
    </div>
    <div class="hstack gap-2">
      <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Reminders
    </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-4 small border-t pt-4">
  <span class="font-semibold">Brand name 15</span> <a href="#">About</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Help centre</a> <span class="ms-auto text-muted">&copy; 2026</span> 
</footer>

10Chat bubbles

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

Our health check-ups guides time back in your day on any device.

The new reminders gives data easy to understand all year round.

A flexible community guides decisions quicker and clearer on any device.

Our health check-ups gives new ideas to life for teams of every size.

<div class="vstack gap-2">
  <div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
    Our health check-ups guides time back in your day on any device.
  </div>
  <div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
    The new reminders gives data easy to understand all year round.
  </div>
  <div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
    A flexible community guides decisions quicker and clearer on any device.
  </div>
  <div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
    Our health check-ups gives new ideas to life for teams of every size.
  </div>
</div>

11Wrapping tag row

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

DermatologyCardiologyOrthopedicsDentalPediatrics

<div class="hstack flex-wrap gap-1">
  <span class="badge rounded-full text-bg-light border">Dermatology</span><span class="badge rounded-full text-bg-light border">Cardiology</span><span class="badge rounded-full text-bg-light border">Orthopedics</span><span class="badge rounded-full text-bg-light border">Dental</span><span class="badge rounded-full text-bg-light border">Pediatrics</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-md">
  <div class="hstack gap-4 p-4 border-b">
    <span class="text-lg text-primary"><i class="bi bi-envelope" 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-4 p-4">
    <span class="text-lg 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.

3.7k

Clients

393

Projects

4.7

Rating

<div class="hstack gap-4 md:gap-6 p-4 border rounded-md justify-center text-center">
  <div>
    <div class="text-xl font-bold">
      3.7k
    </div>
    <small class="text-muted">Clients</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="text-xl font-bold">
      393
    </div>
    <small class="text-muted">Projects</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="text-xl font-bold">
      4.7
    </div>
    <small class="text-muted">Rating</small>
  </div>
</div>

14Card meta line

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

9 lessons from our workflow

The new insurance friendly lets data easy to understand without the usual hassle.

Aria Lindqvist·Oct 15, 2026 220

<div class="card" style="max-width:24rem">
  <div class="card-body">
    <h3 class="h6">9 lessons from our workflow</h3>
    <p class="small mb-0">The new insurance friendly lets data easy to understand without the usual hassle.</p>
  </div>
  <div class="card-footer hstack gap-2 small text-muted">
    <img src="../assets/img/avatar-4.svg" alt="" width="24" height="24" class="rounded-full"> <span>Aria Lindqvist</span><span>&middot;</span><span>Oct 15, 2026</span> <span class="ms-auto"><i class="bi bi-heart" aria-hidden="true"></i> 220</span> 
  </div>
</div>

15Order timeline

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

Order placedNov 7, 2025

PackedMay 12, 2026

ShippedNov 4, 2025

DeliveredExpected Jan 28, 2027

<div class="vstack gap-4">
  <div class="hstack gap-4">
    <span class="badge rounded-full 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-muted">Nov 7, 2025</small>
    </div>
  </div>
  <div class="hstack gap-4">
    <span class="badge rounded-full 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-muted">May 12, 2026</small>
    </div>
  </div>
  <div class="hstack gap-4">
    <span class="badge rounded-full 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-muted">Nov 4, 2025</small>
    </div>
  </div>
  <div class="hstack gap-4">
    <span class="badge rounded-full text-bg-secondary"><i class="bi bi-clock" aria-hidden="true"></i></span>
    <div class="vstack">
      <strong class="small">Delivered</strong><small class="text-muted">Expected Jan 28, 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 sm:flex-nowrap" role="search">
  <label class="sr-only" for="hp-search-1241">Search</label>
  <input class="form-control" id="hp-search-1241" type="search" placeholder="Search cardiology"> 
  <label class="sr-only" 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.pdf710 KB

proposal-2025.docx474 KB

budget-2025.xlsx803 KB

<div class="vstack gap-2">
  <div class="hstack gap-4 p-2 border rounded-md">
    <span class="text-xl text-danger"><i class="bi bi-filetype-pdf" aria-hidden="true"></i></span>
    <div class="vstack">
      <span class="small font-semibold">report-2026.pdf</span><small class="text-muted">710 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-4 p-2 border rounded-md">
    <span class="text-xl text-primary"><i class="bi bi-filetype-docx" aria-hidden="true"></i></span>
    <div class="vstack">
      <span class="small font-semibold">proposal-2025.docx</span><small class="text-muted">474 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-4 p-2 border rounded-md">
    <span class="text-xl text-success"><i class="bi bi-filetype-xlsx" aria-hidden="true"></i></span>
    <div class="vstack">
      <span class="small font-semibold">budget-2025.xlsx</span><small class="text-muted">803 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.

Dental care

29 View all

Our dental care gives data easy to understand for teams of every size.

<section class="vstack gap-4 p-4 border rounded-md">
  <div class="hstack gap-2">
    <h3 class="h5 mb-0">Dental care</h3>
    <span class="badge text-bg-primary">29</span> <a class="ms-auto small" href="#">View all</a> 
  </div>
  <p class="mb-0 small">Our dental care gives data easy to understand 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-4">
  <div>
    <small class="text-muted">gap-0</small>
    <div class="hstack gap-0">
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
    </div>
  </div>
  <div>
    <small class="text-muted">gap-2</small>
    <div class="hstack gap-2">
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
    </div>
  </div>
  <div>
    <small class="text-muted">gap-4</small>
    <div class="hstack gap-6">
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md small">
        Item
      </div>
      <div class="p-2 bg-primary-subtle border border-primary/30 rounded-md 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.

PlanOur physiotherapy shows your work organised at a fair price.

BuildOur telehealth gives customers coming back with friendly support.

LaunchThis simple story turns decisions quicker and clearer for teams of every size.

<div class="vstack md:flex-row gap-4">
  <div class="p-4 border rounded-md flex-auto">
    <strong class="block"><i class="bi bi-pencil" aria-hidden="true"></i> Plan</strong><small>Our physiotherapy shows your work organised at a fair price.</small>
  </div>
  <div class="p-4 border rounded-md flex-auto">
    <strong class="block"><i class="bi bi-hammer" aria-hidden="true"></i> Build</strong><small>Our telehealth gives customers coming back with friendly support.</small>
  </div>
  <div class="p-4 border rounded-md flex-auto">
    <strong class="block"><i class="bi bi-rocket-takeoff" aria-hidden="true"></i> Launch</strong><small>This simple story turns decisions quicker and clearer for teams of every size.</small>
  </div>
</div>