A Bootstrap divider line can be a horizontal <hr>, a vertical .vr element, or a border on an existing container. Use <hr> when the content changes topic; use a decorative line when you only need visual separation. Bootstrap 5.3 includes the styles and utilities we need for all three approaches.
Let’s build a few examples you can copy into a website or dashboard: a simple horizontal rule, a vertical separator, a divider with text, and a responsive two-column layout. None of these examples needs JavaScript.
Step 1: Add Bootstrap
These examples use Bootstrap 5.3. Add the stylesheet below inside your page’s <head>, or use the Bootstrap installation already included in your project. The viewport tag lets the responsive examples follow the device width.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">We’re pinning a specific release so the snippets are reproducible. Place any custom styles after this stylesheet. You don’t need the Bootstrap JavaScript bundle for a divider.
Example 1: A horizontal divider with hr
Start with a standard HTML horizontal rule. Bootstrap styles it for us, while my-4 adds space above and below the line.
<section class="container py-4">
<h2>Project overview</h2>
<p>A short introduction to the work.</p>
<hr class="my-4">
<h2>Next steps</h2>
<p>Choose a layout and add your content.</p>
</section>An <hr> is a thematic break, so it has meaning beyond its appearance. If you just want a border underneath a heading, put a border on that heading instead:
<h2 class="border-bottom pb-3 mb-4">Project overview</h2>That distinction helps keep the HTML meaningful. A border decorates an existing element; an <hr> separates sections of content.
Example 2: Change the colour and thickness
Bootstrap’s border utilities can make the line stronger. Here we use a primary-colour border, a two-pixel width and full element opacity:
<hr class="my-4 border-primary border-2 opacity-100">If an <hr> looks unexpectedly faint, check its opacity as well as its border colour. opacity-100 removes the element’s transparency. For a quieter separator, keep the default styling or choose a lower opacity that is still clear against your background.
Avoid using an accent-coloured line as the only signal for an error, warning or selected state. Add explanatory text whenever the separator communicates more than layout.
Example 3: A vertical divider between two items
Use Bootstrap’s vr helper inside a horizontal stack. The surrounding flex layout gives the line height by stretching it alongside the adjacent items.
<div class="hstack gap-3 p-3 border rounded">
<span>Draft saved</span>
<div class="vr" aria-hidden="true"></div>
<span>Updated today</span>
</div>The divider is decorative here, so it has aria-hidden="true". Both pieces of text remain readable without it. The gap-3 utility supplies the space on either side; you don’t need to add empty text or non-breaking spaces.
If you place a vertical rule outside a useful stretching layout, give it a height explicitly. This small project class makes a two-rem separator:
<style>
.toolbar-divider { height: 2rem; }
</style>
<div class="d-flex align-items-center gap-3">
<span>Preview</span>
<div class="vr toolbar-divider" aria-hidden="true"></div>
<span>Editor</span>
</div>Example 4: A divider with text in the middle
For a sign-in form or a choice between two actions, a label between two lines can be useful. We’ll use flexbox for the layout and borders for the decorative lines:
<div class="d-flex align-items-center gap-3 my-4">
<span class="border-top flex-grow-1" aria-hidden="true"></span>
<span class="text-body-secondary flex-shrink-0">or continue with email</span>
<span class="border-top flex-grow-1" aria-hidden="true"></span>
</div>Each flex-grow-1 span takes an equal share of the available space. The text keeps its natural size because of flex-shrink-0. For a long translated label, remove that class so the text can wrap, then check the result on a narrow screen.
Example 5: A responsive divider between columns
A vertical divider works well between columns on desktop, but the same content may stack on mobile. In that case, use a horizontal border below the first section at small widths and switch to a vertical border at Bootstrap’s medium breakpoint.
<style>
.split-panel {
border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}
@media (min-width: 768px) {
.split-panel {
border-bottom: 0;
border-inline-end: var(--bs-border-width) solid var(--bs-border-color);
}
}
</style>
<div class="container py-4">
<div class="row g-0">
<section class="col-md-6 p-4 split-panel">
<h2>Website settings</h2>
<p>Manage the name and public description.</p>
</section>
<section class="col-md-6 p-4">
<h2>Team settings</h2>
<p>Manage the people working on the project.</p>
</section>
</div>
</div>Bootstrap does not provide responsive variants for every border utility in its default build. A small media query keeps this behaviour explicit. We use Bootstrap’s border variables so the separator follows the theme, and border-inline-end so the rule follows the writing direction.
Common divider problems
The vertical line disappears: its container may have no useful height, or alignment may prevent stretching. Try the horizontal-stack example first, then add an explicit height if the layout needs it.
The horizontal line is too faint: check the <hr> element’s opacity. Increasing border width alone won’t remove transparency.
The divider looks wrong on mobile: check whether the content stacks. A border that belongs between desktop columns may need to move below the first section, as in the responsive example.
A dropdown divider doesn’t work elsewhere: dropdown-divider is intended for dropdown menus. Use <hr>, vr or border utilities for ordinary page content instead.
Putting the examples into a project
Check the separator against both light and dark backgrounds, and resize the page before copying it into another layout. Keep decorative lines out of the accessibility tree where appropriate, and use headings to explain the actual content structure.
See the Bootstrap vertical rule documentation for the helper’s defaults. For more layout techniques, read our Bootstrap negative margins guide. If you need a full set of website and admin layouts, take a look at our AppStrap Bootstrap theme.
