Stacks
Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.
Stacks on Bootstrap<div class="vstack gap-3">
<div class="bg-body-tertiary border bg-200">First item</div>
<div class="bg-body-tertiary border bg-200">Second item</div>
<div class="bg-body-tertiary border bg-200">Third item</div>
</div>
First item
Second item
Third item
<div class="hstack gap-3">
<div class="bg-body-tertiary border bg-200">First item</div>
<div class="bg-body-tertiary border bg-200">Second item</div>
<div class="bg-body-tertiary border bg-200">Third item</div>
</div>
First item
Second item
Third item
<div class="hstack gap-3">
<div class="bg-body-tertiary border bg-200">First item</div>
<div class="bg-body-tertiary border bg-200 ms-auto">Second item</div>
<div class="bg-body-tertiary border bg-200">Third item</div>
</div>
First item
Second item
Third item
<div class="hstack gap-3">
<div class="bg-body-tertiary border bg-200">First item</div>
<div class="bg-body-tertiary border bg-200 ms-auto">Second item</div>
<div class="vr bg-200"></div>
<div class="bg-body-tertiary border bg-200">Third item</div>
</div>
First item
Second item
Third item
<div class="vstack gap-2 col-md-5 mx-auto"><button class="btn btn-secondary" type="button">Save changes</button><button class="btn btn-outline-secondary" type="button">Cancel</button></div>
<div class="hstack gap-3"><input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here..." /><button class="btn btn-secondary" type="button">Submit</button>
<div class="vr bg-200"></div><button class="btn btn-outline-danger" type="button">Reset</button>
</div>