Stacks offer a shortcut for applying a number of flexbox properties to quickly and easily create layouts in Bootstrap.
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="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<b-div padding="3">
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="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<b-div padding="3">
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="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<b-div padding="3">
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="3">
First item
</b-div>
<b-div padding="3">
Second item
</b-div>
<Vr />
<b-div padding="3">
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 color="secondary">
Save changes
</b-button>
<b-button color="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 color="secondary">
Submit
</b-button>
<Vr />
<b-button color="outline-danger">
Reset
</b-button>
</b-div>
</template>