@@include("../partials/doc-sidenav.html")

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:

Design
HTML

<!-- vstack-->
                        <div class="vstack gap-2 col-md-5 mx-auto">
                        <button type="button"
                          class="btn
                            btn-secondary">Save changes</button>
                        <button type="button"
                          class="btn
                            btn-outline-secondary">Cancel</button>
                        </div>

Horizontal stack

Create an inline form with .hstack:

Design
HTML

<!-- hstack-->
                        <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 type="button"
                          class="btn
                            btn-secondary">Submit</button>
                        <div class="vr"></div>
                        <button type="button"
                          class="btn
                            btn-outline-danger">Reset</button>
                        </div>