Dividers

Dividers are subtle lines that visually separate page content and help distinguish between sets of menu items.

Show design guidelines

Code

Horizontal

---

Toggle dark mode

HTML

<hr />

In practice

Use utility classes to effect visual permutations

Color

---

Toggle dark mode

<hr class="border-brand" />

Border

---

Toggle dark mode

<hr class="border-success border-5" />

Spacing

Sibling

---

Sibling

Toggle dark mode

<p>Sibling</p><hr class="my-10" /><p>Sibling</p>