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

Vertical rule

Use the custom vertical rule helper to create vertical dividers like the

element.

Example

Use .vstack to stack buttons and other elements:

Design
HTML

<!-- vr -->
                        <div class="vr"></div>

Vertical rules scale their height in flex layouts:

Design
HTML

<!-- vr -->
                        <div class="d-flex"
                          style="height: 200px;">
                        <div class="vr"></div>
                        </div>

With stacks

They can also be used in stacks:

Design
HTML

First item

Second item

Third item

<!-- vr -->
                        <div class="hstack gap-3">
                        <div class="bg-light border">First item</div>
                        <div class="bg-light border ms-auto">Second item</div>
                        <div class="vr"></div>
                        <div class="bg-light border">Third item</div>
                        </div>