16

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

Codewife_101
  • 357
  • 1
  • 4
  • 19

3 Answers3

40

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.

Riza Khan
  • 2,712
  • 4
  • 18
  • 42
  • 1
    It seems I need to be more fluent with Sass to fully use utility classes. I thought I could find ready-to-use Bootstrap components. – Codewife_101 Sep 16 '21 at 06:23
1
<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

someoneSomewhere
  • 41
  • 2
  • 4
0

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"/>
dfrankow
  • 20,191
  • 41
  • 152
  • 214