Vertical Rule

Create vertical dividers similar to the <hr> element.

Page Contents

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.