wovoui

Stacks

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 projectopen in new window.

Horizontal

By, default <Stack>s are horizontal.

First item
Second item
Third item

<Stack>
    <div class="bg-light border">First item</div>
    <div class="bg-light border">Second item</div>
    <div class="bg-light border">Third item</div>
</Stack>
1
2
3
4
5
6

Vertical

To make vertical stacks, set vertical prop's value to true.

First item
Second item
Third item

<Stack vertical>
    <div class="bg-light border">First item</div>
    <div class="bg-light border">Second item</div>
    <div class="bg-light border">Third item</div>
</Stack>
1
2
3
4
5
6

Gap

To apply gap between stack elements, use gap property. Values should be numeric.

First item
Second item
Third item

<Stack :gap="3" vertical>
    <div class="bg-light border">First item</div>
    <div class="bg-light border">Second item</div>
    <div class="bg-light border">Third item</div>
</Stack>
1
2
3
4
5
6