Does bootstrap 4 have a built-in horizontal divider?

Back to basics: divider 101 in Bootstrap

Let's break down how Bootstrap handles the humble <hr> to give a clear picture of its inbuilt divider. Understanding how it works in the default configuration will make it easier later to bend Bootstrap to your styling will.

Default styling

The <hr> tag in Bootstrap 4 is not your regular break tag anymore. It comes with its own Bootstrap makeup, modifying its look with predetermined margin and border properties.

Padding and margin magic

But don't limit your creativity to the default styles. Bootstrap 4 comes with utility classes for control over spacing. To specify the top or bottom margins, add the .mt-* or .mb-* classes. And when you need symmetry, use .my-*.

Customizing dividers: no black magic, only CSS

Indulge your creative side to customize your horizontal dividers. Wrap the <hr> tag within a div and make use of Bootstrap's .bg-* and .py-* classes, like this:

<!-- An HR and a div walk into a bar -- the div orders a thicker divider -->
<div class="py-2 bg-light">
  <hr class="my-0">
</div>


This styles your divider with a gentle background, effectively making it thicker and standing out that extra bit.

How about separators in menus and contextual positioning?

Dinner with dividers

In dropdowns, for creating separators between menu items, Bootstrap offers .dropdown-divider.

Would we talk, or would we divide and conquer?

How about adding text between huge blocks of content? Bootstrap’s got your back with classes like .row, .col, and .col-auto, maintaining responsiveness, while also handling your text-filled separators.

Delving into responsive and functional dividers

A divider isn’t just a decorative piece

In complex layouts like forms and lists, or between different navigation items, the <hr> serves as a clear separator. It unclutters your content flow and makes the layout easily navigable.

Responsiveness at heart

As with all components in Bootstrap, horizontal dividers also need to behave responsively. Bootstrap’s utility classes ensure your dividers reflow smoothly as the viewport changes.