Vertical rule

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Example

Use .vstack to stack buttons and other elements:

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

Vertical rules scale their height in flex layouts:

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