Stacks

Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever.

Vertical stack

Use .vstack to stack buttons and other elements:

<Button type="button" variant="secondary">Save changes</Button>
<Button type="button" variant="outline-secondary">Cancel</Button>

Horizontal stack

Create an inline form with .hstack :

Design

Code

<div className="hstack gap-3">
    <Form.Control className="me-auto" type="text" placeholder="Add your item here..." />
    <Button type="button" variant="secondary">Submit</Button>
    <div className="vr opacity-25"></div>
    <Button type="button" variant="outline-danger">Reset</Button>
</div>