Does bootstrap 5 have a built-in horizontal line?

bootstrap-5 horizontal-line
Codewife_101 picture Codewife_101 · Feb 9, 2021 · Viewed 13.3k times · Source

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

user1575941 picture user1575941 · Feb 9, 2021

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.

Related questions

Bootstrap: add margin/padding space between columns

I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code: <div class="row"> <div class="text-center col-md-6"> …

Read More
Bootstrap responsive sidebar menu to top navbar

So I've been searching and searching for guidance in this with no avail. Basically, I just want to have a sidebar, but when the screen gets small, aka smartphones screen size, it transforms into a navbar. My HTML code for …

Read More
Using media breakpoints in Bootstrap 4-alpha

In Bootstrap 3 I use this: .something { padding: 5px; @media screen and (min-width: $screen-sm-min) { padding: 20px; } @media screen and (min-width: $screen-md-min) { padding: 40px; } } How can I do the same thing in Boostrap 4-alpha? I can't find an example in their docs. …

Read More