Stacks
Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
Stacks on BootstrapVertical
Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.
<div class="vstack gap-3">
<div class="border border-translucent bg-body-secondary px-3">First item</div>
<div class="border border-translucent bg-body-secondary px-3">Second item</div>
<div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>First item
Second item
Third item
Horizontal
Use .hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use .gap-* utilities to add space between items.
<div class="hstack gap-3">
<div class="border border-translucent bg-body-secondary px-3">First item</div>
<div class="border border-translucent bg-body-secondary px-3">Second item</div>
<div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>First item
Second item
Third item
Margin utilities
Using horizontal margin utilities like .ms-auto as spacers:
<div class="hstack gap-3">
<div class="border border-translucent bg-body-secondary px-3">First item</div>
<div class="border border-translucent bg-body-secondary px-3 ms-auto">Second item</div>
<div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>First item
Second item
Third item
Vertical rules
allowing you to create vertical dividers in common layouts
<div class="hstack gap-3">
<div class="border border-translucent bg-body-secondary px-3">First item</div>
<div class="border border-translucent bg-body-secondary px-3 ms-auto">Second item</div>
<div class="vr bg-body-secondary"></div>
<div class="border border-translucent bg-body-secondary px-3">Third item</div>
</div>First item
Second item
Third item
Stack buttons
Use .vstack to stack buttons and other elements:
<div class="vstack gap-2 col-md-5 mx-auto">
<button class="btn btn-secondary" type="button">Save changes</button>
<button class="btn btn-outline-secondary" type="button">Cancel</button>
</div>Inline form
Create an inline form with .hstack:
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here..." />
<button class="btn btn-secondary" type="button">Submit</button>
<div class="vr bg-body-secondary"></div>
<button class="btn btn-outline-danger" type="button">Reset</button>
</div>
