Stacks
Vue Bootstrap 5 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.
Heads up! Support for gap utilities with flexbox was recently added to Safari, so consider verifying your intended browser support. Grid layout should have no issues. Read more.
Vertical
Use .vstack
to create vertical layouts. Stacked items are
full-width by default. Use .gap-*
utilities to add space
between items.
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.
Using horizontal margin utilities like .ms-auto
as
spacers:
And with vertical rules:
Examples
Use .vstack
to stack buttons and other elements:
Create an inline form with .hstack
: