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.
Ava Rossi
Product Designer · Montreal
<div class="hstack gap-4 p-4 border rounded-md">
<img src="../assets/img/avatar-8.svg" alt="Ava Rossi" width="48" height="48" class="rounded-full">
<div class="vstack gap-0">
<strong>Ava Rossi</strong> <small class="text-muted">Product Designer · 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 sommelier has paired each dish with wines from small family vineyards.
yesterdayEvery detail is handled by people who care about getting it right.
5 min agoChildren are always welcome, with a menu made just for them.
just now<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">
Our sommelier has paired each dish with wines from small family vineyards.
</div>
<small class="ms-auto whitespace-nowrap text-muted">yesterday</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">
Every detail is handled by people who care about getting it right.
</div>
<small class="ms-auto whitespace-nowrap text-muted">5 min 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">
Children are always welcome, with a menu made just for them.
</div>
<small class="ms-auto whitespace-nowrap text-muted">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 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-muted">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.
Chef's specials
Private dining rooms seat up to forty guests for birthdays and business dinners.
Local ingredients
We have been feeding this neighbourhood for over a decade, and we still love it.
Vegan options
Our menu changes with the seasons and the best produce from nearby farms.
<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">Chef's specials</h3>
<p class="small mb-0">Private dining rooms seat up to forty guests for birthdays and business dinners.</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">Local ingredients</h3>
<p class="small mb-0">We have been feeding this neighbourhood for over a decade, and we still love it.</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">Vegan options</h3>
<p class="small mb-0">Our menu changes with the seasons and the best produce from nearby farms.</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
$94.78 / month
Local ingredients
Fast delivery
Online reservations
Chef's specials
Vegan options
<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">$94.78<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>Local ingredients
</div>
<div class="hstack gap-2">
<span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Fast delivery
</div>
<div class="hstack gap-2">
<span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Online reservations
</div>
<div class="hstack gap-2">
<span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Chef's specials
</div>
<div class="hstack gap-2">
<span class="text-success-emphasis"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Vegan options
</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">Yaraly Labs</span> <a href="#">About</a><a href="#">Careers</a><a href="#">Press</a><a href="#">Help centre</a> <span class="ms-auto text-muted">© 2026</span>
</footer>10Chat bubbles
A vstack where align-self-start and align-self-end place incoming and outgoing messages.
Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
Order for pickup or delivery and enjoy the same dishes at home.
Start in minutes and get help from a real person whenever you need it.
Cooking classes on Saturday mornings teach you our favourite recipes.
<div class="vstack gap-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
</div>
<div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
Order for pickup or delivery and enjoy the same dishes at home.
</div>
<div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
Start in minutes and get help from a real person whenever you need it.
</div>
<div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
Cooking classes on Saturday mornings teach you our favourite recipes.
</div>
</div>11Wrapping tag row
hstack plus flex-wrap and gap-1 keeps tags tidy when they run onto a second line.
StartersMainsDrinksDessertsSpecials
<div class="hstack flex-wrap gap-1">
<span class="badge rounded-full text-bg-light border">Starters</span><span class="badge rounded-full text-bg-light border">Mains</span><span class="badge rounded-full text-bg-light border">Drinks</span><span class="badge rounded-full text-bg-light border">Desserts</span><span class="badge rounded-full text-bg-light border">Specials</span>
</div>12Settings rows
Each setting is an hstack with the label on the left and a switch pushed right with ms-auto.
<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.
1.5k
Clients765
Projects4.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">
1.5k
</div>
<small class="text-muted">Clients</small>
</div>
<div class="vr">
</div>
<div>
<div class="text-xl font-bold">
765
</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.
Five wines to pair with a summer dinner
Private dining rooms seat up to forty guests for birthdays and business dinners.
Kenji Haddad·Feb 15, 2026
240
<div class="card" style="max-width:24rem">
<div class="card-body">
<h3 class="h6">Five wines to pair with a summer dinner</h3>
<p class="small mb-0">Private dining rooms seat up to forty guests for birthdays and business dinners.</p>
</div>
<div class="card-footer hstack gap-2 small text-muted">
<img src="../assets/img/avatar-3.svg" alt="" width="24" height="24" class="rounded-full"> <span>Kenji Haddad</span><span>·</span><span>Feb 15, 2026</span> <span class="ms-auto"><i class="bi bi-heart-fill" aria-hidden="true"></i> 240</span>
</div>
</div>15Order timeline
A vstack of steps, each an hstack of status badge and text.
Order placedNov 1, 2025
PackedSep 22, 2025
ShippedDec 22, 2025
DeliveredExpected Dec 12, 2026
<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 1, 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">Sep 22, 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">Shipped</strong><small class="text-muted">Dec 22, 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 Dec 12, 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 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 specials">
<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-2025.pdf413 KB
proposal-2026.docx771 KB
budget-2026.xlsx424 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-2025.pdf</span><small class="text-muted">413 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-2026.docx</span><small class="text-muted">771 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-2026.xlsx</span><small class="text-muted">424 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.
Our team has done this many times, so you never have to guess.
<section class="vstack gap-4 p-4 border rounded-md">
<div class="hstack gap-2">
<h3 class="h5 mb-0">Takeaway</h3>
<span class="badge text-bg-primary">2</span> <a class="ms-auto small" href="#">View all</a>
</div>
<p class="mb-0 small">Our team has done this many times, so you never have to guess.</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
Item
Item
Item
gap-2
Item
Item
Item
Item
gap-4
Item
Item
Item
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.
PlanWe have been feeding this neighbourhood for over a decade, and we still love it.
BuildFriendly people answer your questions quickly, by phone, chat or email.
LaunchThousands of guests already trust us, and we work hard to keep it that 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>We have been feeding this neighbourhood for over a decade, and we still love it.</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>Thousands of guests already trust us, and we work hard to keep it that way.</small>
</div>
</div>