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 PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

Vertical rule

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

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>