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
of1em
- Their color is set via
currentColor
andopacity
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>