Vertical Rule

The vr helper draws a thin vertical divider that takes the height of its flex row. Use it to separate groups in toolbars, stats, metadata lines and footers; tint it with text colours or change its thickness and opacity.

1Between two items

A vr inside a flex row takes the full row height.

Wine pairing

Dine-in

<div class="d-flex align-items-center gap-3" style="height:3rem">
  <span>Wine pairing</span>
  <div class="vr">
  </div>
  <span>Dine-in</span> 
</div>

2Statistics row

Big figures divided by vertical rules.

47.4k

Downloads

629

Reviews

Countries

<div class="hstack gap-4 justify-content-center text-center p-3 border rounded">
  <div>
    <div class="fs-3 fw-bold">
      47.4k
    </div>
    <small class="text-body-secondary">Downloads</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="fs-3 fw-bold">
      629
    </div>
    <small class="text-body-secondary">Reviews</small>
  </div>
  <div class="vr">
  </div>
  <div>
    <div class="fs-3 fw-bold">
      66
    </div>
    <small class="text-body-secondary">Countries</small>
  </div>
</div>

3Toolbar groups

Vertical rules separate groups of editing buttons.

<div class="hstack gap-1 border rounded p-1" role="toolbar" aria-label="Editor">
  <button type="button" class="btn btn-sm btn-light" aria-label="Undo"><i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-sm btn-light" aria-label="Redo"><i class="bi bi-arrow-clockwise" aria-hidden="true"></i></button>
  <div class="vr mx-1">
  </div>
  <button type="button" class="btn btn-sm btn-light" aria-label="Bold"><i class="bi bi-type-bold" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-sm btn-light" aria-label="Italic"><i class="bi bi-type-italic" aria-hidden="true"></i></button>
  <div class="vr mx-1">
  </div>
  <button type="button" class="btn btn-sm btn-light" aria-label="Align left"><i class="bi bi-text-left" aria-hidden="true"></i></button>
  <button type="button" class="btn btn-sm btn-light" aria-label="Align centre"><i class="bi bi-text-center" aria-hidden="true"></i></button>
</div>

4Article metadata

Author, date and reading time on one line with dividers.

Felix Rossi

Jul 18, 2026

14 min read

<div class="hstack gap-2 small text-body-secondary flex-wrap">
  <img src="../assets/img/avatar-7.svg" alt="" width="24" height="24" class="rounded-circle"><span class="text-body">Felix Rossi</span> 
  <div class="vr">
  </div>
  <span>Jul 18, 2026</span> 
  <div class="vr">
  </div>
  <span>14 min read</span> 
</div>

5Footer links

Small legal links separated by vertical rules instead of pipes.

Privacy

Terms

Sitemap

<div class="hstack gap-2 small justify-content-center">
  <a href="#" class="link-secondary">Privacy</a>
  <div class="vr">
  </div>
  <a href="#" class="link-secondary">Terms</a>
  <div class="vr">
  </div>
  <a href="#" class="link-secondary">Cookies</a>
  <div class="vr">
  </div>
  <a href="#" class="link-secondary">Sitemap</a> 
</div>

6Card footer actions

Two equal actions in a card footer split by a rule.

Five wines to pair with a summer dinner

Thousands of guests already trust us, and we work hard to keep it that way.

<div class="card" style="max-width:20rem">
  <div class="card-body">
    <h3 class="h6">Five wines to pair with a summer dinner</h3>
    <p class="small mb-0">Thousands of guests already trust us, and we work hard to keep it that way.</p>
  </div>
  <div class="card-footer d-flex p-0">
    <a href="#" class="flex-fill text-center py-2 text-decoration-none"><i class="bi bi-hand-thumbs-up-fill" aria-hidden="true"></i> Like</a> 
    <div class="vr">
    </div>
    <a href="#" class="flex-fill text-center py-2 text-decoration-none"><i class="bi bi-share-fill" aria-hidden="true"></i> Share</a> 
  </div>
</div>

7Navbar divider

A vr between the navigation links and the account actions.

<nav class="navbar bg-body-tertiary rounded px-3" aria-label="Main">
  <div class="hstack gap-3 w-100">
    <span class="navbar-brand mb-0 h6">Koraara Deck</span> <a href="#" class="nav-link d-none d-sm-block">Product</a> <a href="#" class="nav-link d-none d-sm-block">Pricing</a> 
    <div class="vr ms-auto">
    </div>
    <a href="#" class="nav-link">Log in</a> <a href="#" class="btn btn-sm btn-primary">Sign up</a> 
  </div>
</nav>

8Price comparison

Old and new price with the saving, separated by rules.

$13.00

~~$16.25~~

Save 20%

<div class="hstack gap-3 align-items-center">
  <span class="fs-4 fw-bold text-danger">$13.00</span>
  <div class="vr">
  </div>
  <del class="text-body-secondary">$16.25</del>
  <div class="vr">
  </div>
  <span class="badge text-bg-success">Save 20%</span> 
</div>

9Rating summary

Stars, score and review count in one row.

4.7

198 reviews

In stock

<div class="hstack gap-2 small">
  <span class="text-warning"><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-half" aria-hidden="true"></i></span><strong>4.7</strong> 
  <div class="vr">
  </div>
  <a href="#">198 reviews</a> 
  <div class="vr">
  </div>
  <span class="text-success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> In stock</span> 
</div>

10User chip

Avatar and name divided from a status text.

Mason Hughes

Online

<div class="d-inline-flex align-items-center gap-2 border rounded-pill ps-1 pe-3 py-1">
  <img src="../assets/img/avatar-10.svg" alt="" width="28" height="28" class="rounded-circle"><span class="small fw-semibold">Mason Hughes</span> 
  <div class="vr">
  </div>
  <small class="text-success">Online</small> 
</div>

11Custom height

Give the rule an explicit height when the row itself has no height.

Koraara Deck

Where every dinner feels like a celebration

<div class="d-flex align-items-center gap-3">
  <span class="fs-5">Koraara Deck</span>
  <div class="vr" style="height:2.5rem">
  </div>
  <span class="small text-body-secondary">Where every dinner feels like a celebration</span> 
</div>

12Coloured rules

The rule uses the current colour, so text-* and opacity-* tint it.

Primary

Success

Danger

End

<div class="hstack gap-3" style="height:2.5rem">
  <span>Primary</span>
  <div class="vr text-primary opacity-100">
  </div>
  <span>Success</span>
  <div class="vr text-success opacity-75">
  </div>
  <span>Danger</span>
  <div class="vr text-danger opacity-50">
  </div>
  <span>End</span> 
</div>

13Thicker rule

Set a width on the vr for a bolder accent divider.

Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.
Jonah Ashford

<div class="d-flex gap-3">
  <div class="vr text-primary opacity-100 rounded" style="width:4px">
  </div>
  <blockquote class="mb-0"><p class="mb-1">Vegan, vegetarian and gluten-free dishes are marked clearly on every menu.</p><footer class="small text-body-secondary">Jonah Ashford</footer></blockquote>
</div>

14Actions in a table cell

Inline action links in a table cell split by rules.

Member	Actions
Ava Kowalski	Edit Remove
Nora Haddad	Edit Remove
Luna Duarte	Edit Remove

<table class="table mb-0">
  <thead>
    <tr>
      <th scope="col">Member</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ava Kowalski</td>
      <td><div class="hstack gap-2 small"><a href="#">Edit</a><div class="vr"></div><a href="#" class="link-danger">Remove</a></div></td>
    </tr>
    <tr>
      <td>Nora Haddad</td>
      <td><div class="hstack gap-2 small"><a href="#">Edit</a><div class="vr"></div><a href="#" class="link-danger">Remove</a></div></td>
    </tr>
    <tr>
      <td>Luna Duarte</td>
      <td><div class="hstack gap-2 small"><a href="#">Edit</a><div class="vr"></div><a href="#" class="link-danger">Remove</a></div></td>
    </tr>
  </tbody>
</table>

15Search bar segments

A combined search box with a rule between the query and the place field.

<form class="d-flex align-items-center border rounded-pill px-3 py-1 gap-2" role="search">
  <span class="text-body-secondary"><i class="bi bi-search" aria-hidden="true"></i></span> 
  <label class="visually-hidden" for="hp-where-1243-q">What</label>
  <input class="form-control border-0 shadow-none px-1" id="hp-where-1243-q" type="search" placeholder="Catering"> 
  <div class="vr">
  </div>
  <label class="visually-hidden" for="hp-where-1243">Where</label>
  <input class="form-control border-0 shadow-none px-1" id="hp-where-1243" type="text" placeholder="Melbourne"> 
  <button type="submit" class="btn btn-primary btn-sm rounded-pill">Go</button>
</form>

16Step connector

Vertical rules connect the steps of a vertical progress tracker.

Request received

May 12, 2026

In progress

Nov 28, 2025

Ready for pickup

Dec 23, 2025

<div class="vstack">
  <div class="d-flex gap-3">
    <div class="d-flex flex-column align-items-center">
      <span class="badge rounded-pill text-bg-primary">1</span>
      <div class="vr my-1" style="min-height:2rem">
      </div>
    </div>
    <div class="pb-2">
      <strong class="small">Request received</strong>
      <div class="small text-body-secondary">
        May 12, 2026
      </div>
    </div>
  </div>
  <div class="d-flex gap-3">
    <div class="d-flex flex-column align-items-center">
      <span class="badge rounded-pill text-bg-primary">2</span>
      <div class="vr my-1" style="min-height:2rem">
      </div>
    </div>
    <div class="pb-2">
      <strong class="small">In progress</strong>
      <div class="small text-body-secondary">
        Nov 28, 2025
      </div>
    </div>
  </div>
  <div class="d-flex gap-3">
    <div class="d-flex flex-column align-items-center">
      <span class="badge rounded-pill text-bg-secondary">3</span>
    </div>
    <div class="pb-2">
      <strong class="small">Ready for pickup</strong>
      <div class="small text-body-secondary">
        Dec 23, 2025
      </div>
    </div>
  </div>
</div>

17Location path

Building, floor and room separated by rules on a booking confirmation.

Main building

Floor 1

Room 523

<div class="hstack gap-2 small flex-wrap">
  <span><i class="bi bi-building-fill" aria-hidden="true"></i> Main building</span>
  <div class="vr">
  </div>
  <span>Floor 1</span>
  <div class="vr">
  </div>
  <span>Room 523</span> 
</div>

18Weather row

Temperature, wind and humidity values divided by rules.

19°

26 km/h

39%

<div class="hstack gap-3 border rounded p-3">
  <span class="fs-2 text-warning"><i class="bi bi-sun" aria-hidden="true"></i></span><span class="fs-4 fw-semibold">19&deg;</span> 
  <div class="vr">
  </div>
  <span class="small"><i class="bi bi-wind" aria-hidden="true"></i> 26 km/h</span> 
  <div class="vr">
  </div>
  <span class="small"><i class="bi bi-droplet-fill" aria-hidden="true"></i> 39%</span> 
</div>

19Button with a split

A rule inside a button separates the label from a count.

<button type="button" class="btn btn-outline-primary d-inline-flex align-items-center gap-2"> <i class="bi bi-eye" aria-hidden="true"></i> Watch <span class="vr"></span> <span>83</span> </button>

20Hide the rule on phones

d-none d-md-block shows the divider only when the items sit side by side.

Call us+1 (555) 384-9402

Email ushello@example.com

<div class="d-flex flex-column flex-md-row gap-3">
  <div>
    <strong class="d-block"><i class="bi bi-telephone-fill" aria-hidden="true"></i> Call us</strong><small>+1 (555) 384-9402</small>
  </div>
  <div class="vr d-none d-md-block">
  </div>
  <div>
    <strong class="d-block"><i class="bi bi-envelope-fill" aria-hidden="true"></i> Email us</strong><small>hello@example.com</small>
  </div>
</div>