Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.
Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
Give us a star ⭐️ on Github.

Vertical rule

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

On this page

How it works

Vertical rules are inspired by the <hr> element, allowing you to create vertical dividers in common layouts. They’re styled just like <hr> elements:

They’re 1px wide
They have min-height of 1em
Their color is set via currentColor and opacity

Customize them with additional styles as needed.

Example

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

Vertical rules scale their height in flex layouts:

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

With stacks

They can also be used in stacks:

First item

Second item

Third item

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