Stacks

Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap. All credit for the concept and implementation goes to the open source Pylon project.

Quick reference

Basic usage

Vertical stack

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>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

You also can use the d-flex and flex-column to create a vertical stack.

<div class="d-flex flex-column gap-3">
  <div>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

Horizontal stack

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>First item</div>
  <div>Second item</div>
  <div>Third item</div>
</div>

Using horizontal margin utilities like .ms-auto as spacers:

<div class="hstack gap-3">
  <div>First item</div>
  <div class="ms-auto">Second item</div>
  <div>Third item</div>
</div>

Examples

Stack buttons

Use .vstack to stack buttons and other elements

<div class="vstack gap-3 max-w-xs mx-auto">
  <button type="button" class="btn btn-primary">Save changes</button>
  <button type="button" class="btn btn-default">Cancel</button>
  <a href="#" class="btn btn-link">Back</a>
</div>

Inline forms

Create an inline form with .hstack

<div class="hstack gap-3">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." />
  <button type="button" class="btn btn-primary">Submit</button>
  <button type="button" class="btn btn-default">Reset</button>
</div>