Bootstrap 5 Stack
Bootstrap 5's Stack component is a shorthand helper built on flexbox that arranges child elements either vertically (vstack) or horizontally (hstack) with consistent spacing using gap utilities. It replaces the need to manually write flexbox CSS for simple one-dimensional layouts. Use it when you need a quick, reliable way to space out a series of buttons, form controls, labels, or content blocks without writing custom CSS.
Primary Class
.stackCommon Use Cases
- →Stacking a series of notification cards vertically in a sidebar with uniform spacing between each card using vstack and gap-3
- →Arranging a row of action buttons (Save, Cancel, Preview) horizontally in a form footer using hstack with gap-2
- →Building a mobile-first list of pricing plan features where items stack vertically on small screens and collapse into an hstack on larger breakpoints
- →Laying out a toolbar of icon buttons and a search input side-by-side using hstack, with a ms-auto utility to push the search field to the right edge
Variants & Classes
| Variant | Description |
|---|---|
| Stack Default | Standard stack with Bootstrap's default styling. |
| Stack Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="vstack gap-3">
<div class="p-3 border rounded bg-light">
<strong>Order #1042</strong>
<span class="text-muted d-block">Placed on 12 Jan 2025 — £89.00</span>
</div>
<div class="p-3 border rounded bg-light">
<strong>Order #1038</strong>
<span class="text-muted d-block">Placed on 4 Jan 2025 — £34.50</span>
</div>
<div class="p-3 border rounded bg-light">
<strong>Order #1031</strong>
<span class="text-muted d-block">Placed on 28 Dec 2024 — £120.00</span>
</div>
<div class="hstack gap-2 mt-2">
<button class="btn btn-primary">View All Orders</button>
<button class="btn btn-outline-secondary ms-auto">Export CSV</button>
</div>
</div>Live Examples
Basic Stack
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated stack with custom colours
- ✓Stack with interactive states
- ✓Responsive stack for all screen sizes
Best Practices
Use ms-auto inside hstack to push items apart
Adding ms-auto to any child of an hstack pushes everything after it to the right edge — ideal for placing a CTA button at the far end of a toolbar or splitting a label from its action link.
Combine vstack with gap responsive variants for tighter mobile layouts
Bootstrap 5.3 supports responsive gap utilities like gap-2 gap-md-4, so you can tighten spacing on mobile without a media query in your CSS.
Nest hstack inside vstack for two-dimensional layouts without a grid
For simple card-style layouts — a row of meta info below a title, for example — nesting an hstack inside each vstack item avoids pulling in the full grid system and keeps your HTML leaner.
Add a vertical rule divider between hstack items
Bootstrap 5 ships a vr class specifically designed for use inside hstack — place <div class="vr"></div> between any two items to render a clean vertical separator line without extra CSS.