[SOLVED] Does bootstrap 5 have a built-in horizontal line?

Does bootstrap 5 have a built-in horizontal line?

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...

Solution

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.