Why is there an important override on the border classes's color property in Bootstrap?

Question

When applying a border to my navigation, I thought it would be best practice to make use of the Bootstrap .border class.

But looking into the code that will render using this class, it appears to be using an !important value on the color value of the border property inside the .border class. In this case I was making use of the .border-bottom class to add a border to the bottom of my navigation.

This is what the rendered code would look like when using the class:

.border-bottom {
    border-bottom: 1px solid #dee2e6!important;
}

This means if I want to edit the color of this border class, I am required to override the color value with another !important value. I was wondering, why is this done like this?

Should I still use the .border class for achieving this purpose and override using another !important in a custom stylehsheet? Or is the .border class not meant for achieving the purpose I am trying to achieve (e.g. I would like a red border instead of whatever white/grey-ish color this is)?

Answer 1

Using !important is considered to be acceptable for utility/helper classes, and Bootstrap's authors have chosen to use !important on all of the Bootstrap 4 Utility classes.

This means that the Border Color utility classes also use !important, and since they follow the other Border classes in CSS file, the !important on the color will take precedence (Example).

If you want to define your own custom border color, then as you said, you will need to use !important.

Answer 2

You are probably using it right, but to change the value of that you probably need to do it in the variable sass file in bootstrap.