Use the custom vertical rule helper to create vertical dividers like the
Vertical rules are inspired by the
<hr> element, allowing you to create vertical dividers in common layouts. They’re styled just like
- They have
- Their color is set via
Customize them with additional styles as needed.
Vertical rules scale their height in flex layouts:
<div class="d-flex" style="height: 200px;"> <div class="vr"></div> </div>
They can also be used in stacks:
<div class="hstack gap-3"> <div class="p-2">First item</div> <div class="p-2 ms-auto">Second item</div> <div class="vr"></div> <div class="p-2">Third item</div> </div>
Customize the vertical rule Sass variable to change its width.