Horizontal Line color styling changed in bootstrap


I am trying to style the color of my horizontal line. The issue is that ever sine I added bootstrap to my document, I can’t get the colors to come out correctly.

Pen: https://codepen.io/michaelnicol/pen/eYWGwBW

Below every h2 at the start of every section I have a <hr class="section-title-hr"> (html 27)

Some of the hr's in the black sections have another class called white-hr. (html 57)

The CSS code is found on lines 118 and 127:

.section-title-hr {
  width: 175px;
  height: 1px;
  border: 1px solid rgb(255, 111, 0);
  background-color: rgb(255, 111, 0);
  display: block;
.white-hr {
  border: 1px solid rgb(255, 255, 255);
  background-color: rgb(255, 255, 255);
  display: block;

The issue is that the colors don’t come out correctly.

No bootstrap:


Is there anyway I can get around these color changes while still keeping bootstrap? Or will I need to remove bootstrap 5 for the non-bootstrap styling?

I tried using straight RGB values to make sure the default values of white and/or orange were not changed, but I got the same colors.

Bootstrap is setting an opacity on the hr element. You can just overwrite it in the selectors (opacity: 1).

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.