Bootstrap 5 Divider
A divider is a thin horizontal or vertical line that visually separates groups of content, such as page sections, blocks of text, form options or toolbar buttons. Bootstrap 5 has no dedicated divider component: you build dividers with the native hr element (which Bootstrap's Reboot styles as a faint 1px line), the .vr vertical rule helper, .dropdown-divider inside menus, and border utilities such as border-top. Use a divider when content needs a clear visual break but not a new heading or section.
Bootstrap class
hr, .vrCommon use cases
- Separating social sign-in buttons from an email login form with a centred 'or' text divider
- Adding a thin rule between an article's introduction and its body, or between post metadata and content
- Splitting inline metadata (author, reading time, date) or toolbar buttons with vertical rules inside an hstack
- Grouping related items in a dropdown menu, such as account links and a sign-out link, with .dropdown-divider
- Marking the boundary between page sections with border-top on the section itself instead of an extra element
Variants and classes
| Variant | Description and classes |
|---|---|
| Default Horizontal Rule | Native hr element. Reboot gives it a 1px top border in the current text colour at 25% opacity, with 1rem margin above and below.hr |
| Coloured Divider | A solid, thicker line in a theme colour. opacity-100 overrides Reboot's default 25% opacity.hr + border-primary + border-2 + opacity-100 |
| Text Divider | A short label such as 'or' centred between two lines, built with flexbox utilities.d-flex align-items-center + flex-grow-1 border-top + px-3 small text-body-secondary |
| Vertical Rule | A vertical line between inline items. It needs a flex parent such as hstack or d-flex to stretch to the row height.hstack gap-3 + vr |
| Dropdown Divider | A separator between groups of items inside a dropdown menu.dropdown-divider |
| Section Border | A full-width line created with a border utility on the section wrapper rather than a separate element.border-top (or border-bottom) + py-5 |
Code example
<!-- 1. Default horizontal rule between two blocks of content -->
<p>Our team reviews every request within one business day.</p>
<hr>
<p>Need help sooner? Call us on the number below.</p>
<!-- 2. Coloured, thicker divider (opacity-100 removes the default fade) -->
<hr class="border-primary border-2 opacity-100">
<!-- 3. Text divider -->
<div class="d-flex align-items-center my-4">
<div class="flex-grow-1 border-top"></div>
<span class="px-3 small text-body-secondary">or</span>
<div class="flex-grow-1 border-top"></div>
</div>
<!-- 4. Vertical rules between inline items -->
<div class="hstack gap-3 small text-body-secondary">
<span>5 min read</span>
<div class="vr"></div>
<span>Updated 12 March 2026</span>
</div>Live examples
Horizontal Rules
The default hr, a solid primary-coloured rule, and a short centred accent under a heading.
Text Divider in a Sign-in Form
An 'or' label centred between two lines, separating social sign-in from email sign-in.
Vertical Rules in Metadata and Toolbars
The .vr helper separating inline post details and grouping toolbar buttons inside hstack containers.
Decorative Section Divider
A centred dot between two subtle lines, hidden from screen readers because it is purely decorative.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Divider with a centred icon between two lines
- Short accent divider under a section heading
- Right-aligned divider with an icon at the end of the line
- Divider with the icon inside a rounded, bordered circle
- Full-width border divider between page sections
- Text divider with a centred label
Best practices
Use hr only for real thematic breaks
The hr element represents a thematic break between paragraph-level content, and browsers expose it to assistive technology as a separator. Use it where the topic genuinely shifts, and draw purely decorative lines with border utilities or elements marked aria-hidden='true', so screen reader users are not told about breaks that do not exist.
Remember the default 25% opacity
Bootstrap's Reboot gives hr an opacity of .25 and makes it inherit the text colour, so a coloured hr looks washed out until you add opacity-100 (or opacity-50 or opacity-75). Because the line uses the current text colour, it also adapts automatically inside dark sections and Bootstrap 5.3's dark colour mode.
Control spacing with margin utilities
Reboot gives hr a 1rem margin above and below. Override it with spacing classes such as my-4 or my-5 so dividers match the vertical rhythm of your sections instead of sitting too close to the text around them.
Give .vr a flex parent
The .vr helper uses align-self: stretch with a 1em minimum height, so it only fills the height of the row inside a flex container such as .hstack or .d-flex. Outside flexbox it renders as a short 1em line.
Prefer section spacing over stacked dividers
Between large page sections, padding and alternating background colours often separate content more cleanly than a line. If you do want a line, put border-top on the section itself rather than adding extra hr elements between sections.