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.
Samir Haddad
Customer Success · Oslo
<div class="hstack gap-4 p-4 border rounded-md">
<img src="../assets/img/avatar-4.svg" alt="Samir Haddad" width="48" height="48" class="rounded-full">
<div class="vstack gap-0">
<strong>Samir Haddad</strong> <small class="text-muted">Customer Success · Oslo</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 global clients lets you focused on what matters at a fair price.
37 min agoA smart project connects complex tasks into simple steps with friendly support.
6 days agoA flexible update helps data easy to understand for teams of every size.
13 hours ago<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-fill" aria-hidden="true"></i></span>
<div class="small">
The new global clients lets you focused on what matters at a fair price.
</div>
<small class="ms-auto whitespace-nowrap text-muted">37 min 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-fill" aria-hidden="true"></i></span>
<div class="small">
A smart project connects complex tasks into simple steps with friendly support.
</div>
<small class="ms-auto whitespace-nowrap text-muted">6 days 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-fill" aria-hidden="true"></i></span>
<div class="small">
A flexible update helps data easy to understand for teams of every size.
</div>
<small class="ms-auto whitespace-nowrap text-muted">13 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-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.
Global clients
A elegant launch shows every detail in view all year round.
Weekly demos
Our brand identity shows complex tasks into simple steps for teams of every size.
Senior designers only
A modern journey lets projects moving forward at a fair price.
<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-fill" aria-hidden="true"></i></span>
<div>
<h3 class="h6 mb-1">Global clients</h3>
<p class="small mb-0">A elegant launch shows every detail in view all year round.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body hstack gap-4">
<span class="text-2xl text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
<div>
<h3 class="h6 mb-1">Weekly demos</h3>
<p class="small mb-0">Our brand identity shows complex tasks into simple steps for teams of every size.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body hstack gap-4">
<span class="text-2xl text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
<div>
<h3 class="h6 mb-1">Senior designers only</h3>
<p class="small mb-0">A modern journey lets projects moving forward at a fair price.</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.36 / month
Senior designers only
Award-winning team
Fast turnaround
Fixed-price projects
Global clients
<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.36<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>Senior designers only
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Award-winning team
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Fast turnaround
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Fixed-price projects
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Global clients
</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 4</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.
This clear process brings decisions quicker and clearer without extra tools.
The new senior designers only shows decisions quicker and clearer for teams of every size.
A smart idea gives you focused on what matters all year round.
A practical update brings every detail in view on any device.
<div class="vstack gap-2">
<div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
This clear process brings decisions quicker and clearer without extra tools.
</div>
<div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
The new senior designers only shows decisions quicker and clearer for teams of every size.
</div>
<div class="px-4 py-2 rounded-lg small bg-surface-3 self-start" style="max-width:80%">
A smart idea gives you focused on what matters all year round.
</div>
<div class="px-4 py-2 rounded-lg small text-bg-primary self-end" style="max-width:80%">
A practical update brings every detail in view on any device.
</div>
</div>11Wrapping tag row
hstack plus flex-wrap and gap-1 keeps tags tidy when they run onto a second line.
WebBrandingSocialPrintMotion
<div class="hstack flex-wrap gap-1">
<span class="badge rounded-full text-bg-light border">Web</span><span class="badge rounded-full text-bg-light border">Branding</span><span class="badge rounded-full text-bg-light border">Social</span><span class="badge rounded-full text-bg-light border">Print</span><span class="badge rounded-full text-bg-light border">Motion</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"><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"><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.4k
Clients667
Projects4.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">
1.4k
</div>
<small class="text-muted">Clients</small>
</div>
<div class="vr">
</div>
<div>
<div class="text-xl font-bold">
667
</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 rebuilt our routine
A modern story guides complex tasks into simple steps without the usual hassle.
Amara Patel·Jan 5, 2026
238
<div class="card" style="max-width:24rem">
<div class="card-body">
<h3 class="h6">How we rebuilt our routine</h3>
<p class="small mb-0">A modern story guides complex tasks into simple steps without the usual hassle.</p>
</div>
<div class="card-footer hstack gap-2 small text-muted">
<img src="../assets/img/avatar-6.svg" alt="" width="24" height="24" class="rounded-full"> <span>Amara Patel</span><span>·</span><span>Jan 5, 2026</span> <span class="ms-auto"><i class="bi bi-heart-fill" aria-hidden="true"></i> 238</span>
</div>
</div>15Order timeline
A vstack of steps, each an hstack of status badge and text.
Order placedOct 2, 2025
PackedMay 10, 2026
ShippedJun 4, 2026
DeliveredExpected Jan 5, 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">Oct 2, 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 10, 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">Jun 4, 2026</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 5, 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 print">
<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.pdf191 KB
proposal-2025.docx798 KB
budget-2026.xlsx466 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">191 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">798 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-2026.xlsx</span><small class="text-muted">466 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 motion graphics lets your work organised wherever you are.
<section class="vstack gap-4 p-4 border rounded-md">
<div class="hstack gap-2">
<h3 class="h5 mb-0">Motion graphics</h3>
<span class="badge text-bg-primary">10</span> <a class="ms-auto small" href="#">View all</a>
</div>
<p class="mb-0 small">Our motion graphics lets your work organised wherever you are.</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.
PlanThis powerful experience brings data easy to understand from the very first day.
BuildOur content strategy makes decisions quicker and clearer without the usual hassle.
LaunchOur motion graphics turns decisions quicker and clearer wherever you are.
<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>This powerful experience brings data easy to understand from the very first day.</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 content strategy makes decisions quicker and clearer without the usual hassle.</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>Our motion graphics turns decisions quicker and clearer wherever you are.</small>
</div>
</div>