Stack

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier.

Page Contents

All credit for the concept and implementation goes to the open source Pylon project.

Heads up! Support for gap property for flexbox is a relatively recent item for some browsers, and not available in Internet Explorer. Consider checking your intended browser support. Consider using the grid layout if you need wider support.

Vertical

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

First item

Second item

Third item

<div class="vstack gap-1">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

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.

First item

Second item

Third item

<div class="hstack gap-1">
  <div class="bg-light border">First item</div>
  <div class="bg-light border">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

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

First item

Second item

Third item

<div class="hstack gap-1">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="bg-light border">Third item</div>
</div>

And with vertical rules:

First item

Second item

Third item

<div class="hstack gap-1">
  <div class="bg-light border">First item</div>
  <div class="bg-light border ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="bg-light border">Third item</div>
</div>

Examples

Use .vstack to stack buttons and other elements:

<div class="vstack gap-0_5 col-md-5 mx-auto">
  <button type="button" class="btn btn-secondary">Save changes</button>
  <button type="button" class="btn btn-outline-secondary">Cancel</button>
</div>

Create an inline form with .hstack:

<div class="hstack gap-1">
  <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
  <button type="button" class="btn btn-secondary">Submit</button>
  <div class="vr"></div>
  <button type="button" class="btn btn-outline-danger">Reset</button>
</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name	Type	Default	Description
`$enable-utility-stacks`	boolean	`true`	Enable the generation of the stacks utility classes.
`$enable-utility-stacks-horizontal`	boolean	`true`	Enable the generation of the horizontal stack utility class.
`$enable-utility-stacks-vertical`	boolean	`true`	Enable the generation of the vertical stack utility class.

Mixins

No mixins available.