Vertical Rule

Create vertical dividers similar to the <hr> element.

Overview

Vertical rules are inspired by the <hr> element, allowing you to create vertical dividers. They inherit styling from the <hr> Sass settings, which by default result in:

  • a 1px width
  • color is set via currentcolor and opacity
  • additionaly a min-height: 1em; is set

Feel free to further customize as needed with additional styles.

Examples

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

Vertical rules scale their height in flex layouts.

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

Vertical rules also work well with gap layouts, at the cost of supporting Internet Explorer.

First item
Second item
Third item
<div class="d-flex gap-1">
<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>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Name Type Default Description
$enable-utility-vr boolean true Enable the generation of the vertical rule utility class.
$vr-border-width string $hr-border-width Vertical rule border width.
$vr-border-color string $hr-border-color Vertical rule border color.
$vr-opacity string $hr-opacity Vertical rule opacity.

Mixins

No mixins available.