1. Docs
2. Helpers
3. Vertical Rule

Vertical Rule

Use .velin-vr to create a vertical divider, perfect for separating content in horizontal layouts such as navbars, toolbars, and horizontal stacks.

How it works

The .velin-vr class renders a self-sizing vertical rule as an inline-block element with a 1px width. It stretches to match the height of its parent via align-self: stretch, and its colour adapts to the current text colour using currentcolor.

.velin-vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}

Example

Place .velin-vr between flex children to add a subtle vertical separator.

<div class="d-flex align-items-center" style="gap:.75rem">
  <span>First item</span>
  <div class="velin-vr"></div>
  <span>Second item</span>
  <div class="velin-vr"></div>
  <span>Third item</span>
</div>

With navs

Vertical rules work well inside navigation elements to visually separate links.

<nav class="d-flex align-items-center" style="gap:.75rem">
  <a href="#">Home</a>
  <div class="velin-vr"></div>
  <a href="#">Products</a>
  <div class="velin-vr"></div>
  <a href="#">About</a>
  <div class="velin-vr"></div>
  <a href="#">Contact</a>
</nav>

With horizontal stacks

Combine .velin-vr with the horizontal stack helper (.velin-stack-h) for a quick toolbar-style layout.

<div class="velin-stack-h" style="gap:.75rem">
  <button class="btn btn-sm btn-primary">Save</button>
  <div class="velin-vr"></div>
  <button class="btn btn-sm btn-secondary">Edit</button>
  <button class="btn btn-sm btn-secondary">Duplicate</button>
  <div class="velin-vr"></div>
  <button class="btn btn-sm btn-danger">Delete</button>
</div>