Stacks

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

On this page

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

Vertical

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

First item

Second item

Third item

vue

<template>
  <b-div
    vstack
    gap="3"
  >
    <b-div padding="2">
      First item
    </b-div>
    <b-div padding="2">
      Second item
    </b-div>
    <b-div padding="2">
      Third item
    </b-div>
  </b-div>
</template>

Horizontal

Use hstack for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use gap attribute to add space between items.

First item

Second item

Third item

vue

<template>
  <b-div
    hstack
    gap="3"
  >
    <b-div padding="2">
      First item
    </b-div>
    <b-div padding="2">
      Second item
    </b-div>
    <b-div padding="2">
      Third item
    </b-div>
  </b-div>
</template>

Using horizontal margin utilities like margin="s-auto" as spacers:

First item

Second item

Third item

vue

<template>
  <b-div
    hstack
    gap="3"
  >
    <b-div padding="2">
      First item
    </b-div>
    <b-div padding="2">
      Second item
    </b-div>
    <b-div padding="2">
      Third item
    </b-div>
  </b-div>
</template>

And with vertical rules:

First item

Second item

Third item

vue

<template>
  <b-div
    hstack
    gap="3"
  >
    <b-div padding="2">
      First item
    </b-div>
    <b-div padding="2">
      Second item
    </b-div>
    <Vr />
    <b-div padding="2">
      Third item
    </b-div>
  </b-div>
</template>

Examples

Use vstack to stack buttons and other elements:

vue

<template>
  <b-div
    vstack
    gap="2"
    margin="x-auto"
  >
    <b-button button="secondary">
      Save changes
    </b-button>
    <b-button button="outline-secondary">
      Cancel
    </b-button>
  </b-div>
</template>

Create an inline form with hstack:

vue

<template>
  <b-div
    hstack
    gap="3"
    margin="x-auto"
  >
    <b-input
      margin="e-auto"
      type="text"
      placeholder="Add your item here..."
      aria-label="Add your item here..."
    />
    <b-button button="secondary">
      Submit
    </b-button>
    <Vr />
    <b-button button="outline-danger">
      Reset
    </b-button>
  </b-div>
</template>