Developed by Codescandy

Vertical rule

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Example

Use .vstack to stack buttons and other elements:

<div className="vr opacity-25"></div>

Vertical rules scale their height in flex layouts:

<div className="d-flex" style={{ height: "200px" }}>
    <div className="vr opacity-25"></div>
</div>

With stacks

They can also be used in stacks:

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