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

Liam Novak Marketing Lead · Melbourne

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

Real-time dashboards show what is on track and what needs attention.

3 days ago

We measure success by how many customers come back and tell their friends.

1 days ago

Set up in an afternoon, connect the tools you use and invite your team.

58 min ago

<div class="vstack gap-2">
  <div class="hstack gap-4 items-start p-2 border rounded-md">
    <span class="text-success-emphasis text-lg"><i class="bi bi-bag-check-fill" aria-hidden="true"></i></span>
    <div class="small">
      Real-time dashboards show what is on track and what needs attention.
    </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-ink text-lg"><i class="bi bi-chat-left-text-fill" aria-hidden="true"></i></span>
    <div class="small">
      We measure success by how many customers come back and tell their friends.
    </div>
    <small class="ms-auto whitespace-nowrap text-muted">1 days ago</small>
  </div>
  <div class="hstack gap-4 items-start p-2 border rounded-md">
    <span class="text-warning-emphasis text-lg"><i class="bi bi-exclamation-triangle-fill" aria-hidden="true"></i></span>
    <div class="small">
      Set up in an afternoon, connect the tools you use and invite your team.
    </div>
    <small class="ms-auto whitespace-nowrap text-muted">58 min 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 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-muted">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.

Open API

Our open API and ready-made integrations fit into the stack you already have.

Real-time collaboration

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

Real-time collaboration

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

<div class="vstack gap-4">
  <div class="card">
    <div class="card-body hstack gap-4">
      <span class="text-2xl text-primary-ink"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Open API</h3>
        <p class="small mb-0">Our open API and ready-made integrations fit into the stack you already have.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body hstack gap-4">
      <span class="text-2xl text-primary-ink"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Real-time collaboration</h3>
        <p class="small mb-0">Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-body hstack gap-4">
      <span class="text-2xl text-primary-ink"><i class="bi bi-people-fill" aria-hidden="true"></i></span>
      <div>
        <h3 class="h6 mb-1">Real-time collaboration</h3>
        <p class="small mb-0">Start in minutes and get help from a real person whenever you need it.</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

$45.43 / month

Real-time collaboration

Audit trail

Open API

Dark mode

99.99% uptime

<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">$45.43<small class="text-base font-normal text-muted"> / month</small></p>
    <div class="hstack gap-2">
      <span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Real-time collaboration
    </div>
    <div class="hstack gap-2">
      <span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Audit trail
    </div>
    <div class="hstack gap-2">
      <span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Open API
    </div>
    <div class="hstack gap-2">
      <span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Dark mode
    </div>
    <div class="hstack gap-2">
      <span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>99.99% uptime
    </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">Aeroora Flow</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.

Every update lands in one place, so nothing gets lost in email threads.

Clear reports turn weekly numbers into decisions in minutes, not days.

Onboarding guides and live chat help new colleagues get going on day one.

Plan projects, track progress and share updates without another status meeting.

<div class="vstack gap-2">
  <div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
    Every update lands in one place, so nothing gets lost in email threads.
  </div>
  <div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
    Clear reports turn weekly numbers into decisions in minutes, not days.
  </div>
  <div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
    Onboarding guides and live chat help new colleagues get going on day one.
  </div>
  <div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
    Plan projects, track progress and share updates without another status meeting.
  </div>
</div>

11Wrapping tag row

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

EngineeringSalesProductMarketingSupport

<div class="hstack flex-wrap gap-1">
  <span class="badge rounded-full text-bg-light border">Engineering</span><span class="badge rounded-full text-bg-light border">Sales</span><span class="badge rounded-full text-bg-light border">Product</span><span class="badge rounded-full text-bg-light border">Marketing</span><span class="badge rounded-full text-bg-light border">Support</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-ink"><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-4 p-4">
    <span class="text-lg text-primary-ink"><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.4k

Clients

592

Projects

4.9

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">
      6.4k
    </div>
    <small class="text-muted">Clients</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="text-xl font-bold">
      592
    </div>
    <small class="text-muted">Projects</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="text-xl font-bold">
      4.9
    </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.

How we cut our release cycle in half

Automations take care of the repetitive steps, so people can focus on real work.

Lucas Haddad·Mar 4, 2026 130

<div class="card" style="max-width:24rem">
  <div class="card-body">
    <h3 class="h6">How we cut our release cycle in half</h3>
    <p class="small mb-0">Automations take care of the repetitive steps, so people can focus on real work.</p>
  </div>
  <div class="card-footer hstack gap-2 small text-muted">
    <img src="../assets/img/avatar-9.svg" alt="" width="24" height="24" class="rounded-full"> <span>Lucas Haddad</span><span>&middot;</span><span>Mar 4, 2026</span> <span class="ms-auto"><i class="bi bi-heart-fill" aria-hidden="true"></i> 130</span> 
  </div>
</div>

15Order timeline

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

Order placedDec 11, 2025

PackedMar 17, 2026

ShippedSep 14, 2025

DeliveredExpected Jan 18, 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">Dec 11, 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">Mar 17, 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">Sep 14, 2025</small>
    </div>
  </div>
  <div class="hstack gap-4">
    <span class="badge rounded-full 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-muted">Expected Jan 18, 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 engineering"> 
  <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" 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.pdf723 KB

proposal-2025.docx464 KB

budget-2025.xlsx796 KB

<div class="vstack gap-2">
  <div class="hstack gap-4 p-2 border rounded-md">
    <span class="text-xl text-danger-emphasis"><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">723 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-ink"><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">464 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-emphasis"><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">796 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.

Workflow automation

25 View all

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

<section class="vstack gap-4 p-4 border rounded-md">
  <div class="hstack gap-2">
    <h3 class="h5 mb-0">Workflow automation</h3>
    <span class="badge text-bg-primary">25</span> <a class="ms-auto small" href="#">View all</a> 
  </div>
  <p class="mb-0 small">Every detail is handled by people who care about getting it right.</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.

PlanTeams report saving around five hours a week after the first month.

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

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

<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-fill" aria-hidden="true"></i> Plan</strong><small>Teams report saving around five hours a week after the first month.</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>Friendly people answer your questions quickly, by phone, chat or email.</small>
  </div>
  <div class="p-4 border rounded-md flex-auto">
    <strong class="block"><i class="bi bi-rocket-takeoff-fill" aria-hidden="true"></i> Launch</strong><small>Clear prices, honest advice and no surprises along the way.</small>
  </div>
</div>