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" 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-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.
Maya Ortega
Sales Executive · Montreal
<div class="hstack gap-3 p-3 border rounded">
<img src="../assets/img/avatar-9.svg" alt="Maya Ortega" width="48" height="48" class="rounded-circle">
<div class="vstack gap-0">
<strong>Maya Ortega</strong> <small class="text-body-secondary">Sales Executive · 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.
Start in minutes and get help from a real person whenever you need it.
16 hours agoOur open API and ready-made integrations fit into the stack you already have.
20 hours agoGranular roles keep sensitive work private while everyone else stays informed.
just now<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" aria-hidden="true"></i></span>
<div class="small">
Start in minutes and get help from a real person whenever you need it.
</div>
<small class="ms-auto text-nowrap text-body-secondary">16 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" aria-hidden="true"></i></span>
<div class="small">
Our open API and ready-made integrations fit into the stack you already have.
</div>
<small class="ms-auto text-nowrap text-body-secondary">20 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" aria-hidden="true"></i></span>
<div class="small">
Granular roles keep sensitive work private while everyone else stays informed.
</div>
<small class="ms-auto text-nowrap text-body-secondary">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-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.
Open API
Your data is encrypted, backed up daily and hosted in the region you choose.
Role-based access
Friendly people answer your questions quickly, by phone, chat or email.
Role-based access
Clear prices, honest advice and no surprises along the way.
<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-shield-check" aria-hidden="true"></i></span>
<div>
<h3 class="h6 mb-1">Open API</h3>
<p class="small mb-0">Your data is encrypted, backed up daily and hosted in the region you choose.</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" aria-hidden="true"></i></span>
<div>
<h3 class="h6 mb-1">Role-based access</h3>
<p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-body hstack gap-3">
<span class="fs-3 text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span>
<div>
<h3 class="h6 mb-1">Role-based access</h3>
<p class="small mb-0">Clear prices, honest advice and no surprises along the way.</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
$37.98 / month
Role-based access
Open API
Dark mode
Audit trail
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="fs-3 fw-bold mb-1">$37.98<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>Role-based access
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Open API
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Dark mode
</div>
<div class="hstack gap-2">
<span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>Audit trail
</div>
<div class="hstack gap-2">
<span class="text-success"><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-3 small border-top pt-3">
<span class="fw-semibold">Brio</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">© 2026</span>
</footer>10Chat bubbles
A vstack where align-self-start and align-self-end place incoming and outgoing messages.
Real-time dashboards show what is on track and what needs attention.
Every update lands in one place, so nothing gets lost in email threads.
Teams report saving around five hours a week after the first month.
Onboarding guides and live chat help new colleagues get going on day one.
<div class="vstack gap-2">
<div class="px-3 py-2 rounded-3 small bg-body-tertiary align-self-start" style="max-width:80%">
Real-time dashboards show what is on track and what needs attention.
</div>
<div class="px-3 py-2 rounded-3 small text-bg-primary align-self-end" style="max-width:80%">
Every update lands in one place, so nothing gets lost in email threads.
</div>
<div class="px-3 py-2 rounded-3 small bg-body-tertiary align-self-start" style="max-width:80%">
Teams report saving around five hours a week after the first month.
</div>
<div class="px-3 py-2 rounded-3 small text-bg-primary align-self-end" style="max-width:80%">
Onboarding guides and live chat help new colleagues get going on day one.
</div>
</div>11Wrapping tag row
hstack plus flex-wrap and gap-1 keeps tags tidy when they run onto a second line.
ProductSalesEngineeringSupportMarketing
<div class="hstack flex-wrap gap-1">
<span class="badge rounded-pill text-bg-light border">Product</span><span class="badge rounded-pill text-bg-light border">Sales</span><span class="badge rounded-pill text-bg-light border">Engineering</span><span class="badge rounded-pill text-bg-light border">Support</span><span class="badge rounded-pill text-bg-light border">Marketing</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">
<div class="hstack gap-3 p-3 border-bottom">
<span class="fs-5 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-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.
3.6k
Clients195
Projects4.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">
3.6k
</div>
<small class="text-body-secondary">Clients</small>
</div>
<div class="vr">
</div>
<div>
<div class="fs-4 fw-bold">
195
</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.
How one support team cut first replies to 20 minutes
Thousands of customers already trust us, and we work hard to keep it that way.
Ava Mensah·Apr 27, 2026
112
<div class="card" style="max-width:24rem">
<div class="card-body">
<h3 class="h6">How one support team cut first replies to 20 minutes</h3>
<p class="small mb-0">Thousands of customers already trust us, and we work hard to keep it that way.</p>
</div>
<div class="card-footer hstack gap-2 small text-body-secondary">
<img src="../assets/img/avatar-2.svg" alt="" width="24" height="24" class="rounded-circle"> <span>Ava Mensah</span><span>·</span><span>Apr 27, 2026</span> <span class="ms-auto"><i class="bi bi-heart" aria-hidden="true"></i> 112</span>
</div>
</div>15Order timeline
A vstack of steps, each an hstack of status badge and text.
Order placedMar 27, 2026
PackedApr 9, 2026
ShippedMay 4, 2026
DeliveredExpected Dec 26, 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">Mar 27, 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">Apr 9, 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">May 4, 2026</small>
</div>
</div>
<div class="hstack gap-3">
<span class="badge rounded-pill text-bg-secondary"><i class="bi bi-clock" aria-hidden="true"></i></span>
<div class="vstack">
<strong class="small">Delivered</strong><small class="text-body-secondary">Expected Dec 26, 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 sales">
<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-2025.pdf144 KB
proposal-2026.docx957 KB
budget-2025.xlsx436 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-2025.pdf</span><small class="text-body-secondary">144 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-2026.docx</span><small class="text-body-secondary">957 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-2025.xlsx</span><small class="text-body-secondary">436 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.
Set up in an afternoon, connect the tools you use and invite your team.
<section class="vstack gap-3 p-3 border rounded">
<div class="hstack gap-2">
<h3 class="h5 mb-0">API integrations</h3>
<span class="badge text-bg-primary">27</span> <a class="ms-auto small" href="#">View all</a>
</div>
<p class="mb-0 small">Set up in an afternoon, connect the tools you use and invite your team.</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-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.
PlanEvery detail is handled by people who care about getting it right.
BuildOur team has done this many times, so you never have to guess.
LaunchClear reports turn weekly numbers into decisions in minutes, not days.
<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" aria-hidden="true"></i> Plan</strong><small>Every detail is handled by people who care about getting it right.</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>Our team has done this many times, so you never have to guess.</small>
</div>
<div class="p-3 border rounded flex-fill">
<strong class="d-block"><i class="bi bi-rocket-takeoff" aria-hidden="true"></i> Launch</strong><small>Clear reports turn weekly numbers into decisions in minutes, not days.</small>
</div>
</div>