Dividers

Dividers draw a thin horizontal rule with a centered icon to break up sections of content. The .divider wrapper renders lines on either side of an <i> icon, and modifiers control alignment, size, and the icon's shape.

Structure

.divider : the base divider. Icon sits to the left by default with a line to its right.
.divider-center : centers the icon with lines on both sides.
.divider-right : aligns the icon to the right with a line to its left.
.divider-sm : a shorter, smaller divider.
.divider-rounded : wraps the icon in a filled rounded badge.
.divider-border : wraps the icon in a bordered (outlined) rounded badge.
.divider-margin-lg : increases the vertical margin around the divider.
<i> : the icon, using any Bootstrap Icons or Font Awesome class.

Markup

<div class="divider"><i class="bi-circle-fill"></i></div>

Variants

Alignment

<div class="divider"><i class="bi-circle-fill"></i></div>
<div class="divider divider-center"><i class="bi-cloud-fill"></i></div>
<div class="divider divider-right"><i class="bi-heart-fill"></i></div>

Small divider

<div class="divider divider-sm divider-center"><i class="bi-crop"></i></div>

Rounded and bordered icons

<div class="divider divider-rounded divider-center"><i class="bi-geo-alt-fill"></i></div>
<div class="divider divider-border divider-center"><i class="bi-star-fill"></i></div>

Tips

Any icon font works inside the <i>, including Font Awesome classes like fa-solid fa-dumbbell.
Combine an alignment modifier with a shape modifier, for example divider divider-center divider-rounded.
Use .divider-margin-lg when you want extra breathing room between stacked content sections.

Was this page helpful?