Does bootstrap 5 have a built-in horizontal line?

Question

I'm looking for styled or colored horizontal lines, preferably with success, primary, warning classes. A similar concept to colored links.

I couldn't find this topic on Bootstrap's website.

I found a few working solutions referring to Bootstrap v4.

In my case:

<div class="divider py-1 bg-success"></div>

It works, but I guess it's not the best practice...

Answer 1

Yes it does. Part of the Reboot, and is present in both Bootstrap-reboot.css & Bootstrap.css. It defines the <hr> as:

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

Also, Bootstrap 5 has moved a lot of its UI control over to utility classes... that gives you a far richer control of your UI. For example, if you wanted a "danger" / red colour <hr> you could use:

<hr class="bg-danger border-2 border-top border-danger" />

Have a look at the Utility classes in their docs.

Answer 2

<div class="border-top">
  top bordered section
</div>

Answer 3

The best way to use the <hr> tag using BootStrap5 is to use the border as stated above, but you have several options that give you more control over the <hr> tag. For instance this controls the thickness and color.

<hr class="border-bottom border-3 border-dark">

Answer 4

Using hr with the spacers helped me. Example horizontal rule that has a bit of space on top and bottom:

    <hr class="mt-1 mb-1"/>

Answer 5

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-1 border-bottom"></div>

This should work