Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
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
Use vstack
attribute to create vertical layouts. Stacked items are full-width by default. Use gap
attribute to add space between items.
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.
Using horizontal margin utilities like margin="s-auto"
as spacers:
And with vertical rules:
Use vstack
to stack buttons and other elements:
Create an inline form with hstack
: