Vertical rule

Use a vertical rule to divide inline content.

How it works

Vertical rules are decorative separators built on Bootstrap's .vr utility. They scale to the line height or flex context around them and can be customized with normal sizing, opacity, and alignment utilities.

Use surrounding flex or stack layout to give the rule useful height; the helper does not create semantic separation by itself.

Example

Vertical rules use the Bootstrap vr utility and render as decorative by default.

First item Second item
aspnet 

<bs-div display="Flex" gap="Default3" align-items="Center">
    <span>First item</span>
    <bs-vr />
    <span>Second item</span>
</bs-div>

With stacks

Use vertical rules inside flex layouts or Bootstrap stacks to separate inline groups.

aspnet 

<bs-div gap="Default3" stack-orientation="HStack">
    <bs-button btn-style="Secondary" outline="true">Save</bs-button>
    <bs-vr />
    <bs-button btn-style="Danger" outline="true">Discard</bs-button>
</bs-div>

Custom height

Pair the helper with sizing utilities when the divider should not inherit the full line height of its flex container.

Short Divider
aspnet 

<bs-div display="Flex" gap="Default3" align-items="Center">
    <span>Short</span>
    <bs-vr opacity="Opacity50" align-self="Stretch" />
    <span>Divider</span>
</bs-div>