Vertical Rule

Use the custom vertical rule helper to create vertical dividers like the <hr> element.

How it works #

The <hr> element served as inspiration for vertical rules, which let you add vertical divisions to standard layouts. They have the same styling as <hr> elements:

One pixel wide.
Their minimum height is 1 meter.
Current color and opacity are used to control their color.

Add more styles as needed to make them more unique.

Example #

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

RESULT

Vertical rules scale their height in flex layouts:

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

RESULT

With stacks #

They can also be used in stacks:

<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>

RESULT

First item

Second item

Third item

How it works
Example
With stacks

Previous « Text Truncation

Next Visually Hidden »