Overriding Bootstrap default !important color codes

Question

I'm using Bootstrap and trying to develop this website. Particularly using their bg-primary category, which sets the default color to a royal blue. However, I need the color to match a teal on the "subscribe" button. However, as you can see in the inspection, the color of the card background has a default setting of the blue with an important tag.

My CSS to change the bg-primary color can't override the natural color Bootstrap set because they placed the important tag on it (even my important won't override theirs).

.bg-primary {
    background-color: #3292a6 !important;
}

How do I go in and irrevocably remove Bootstraps default !important tag to the .bg-primary class?

Because there's a lot of other Bootstrap CSS formatting I wish to keep. I just need to change the default color. — J.G.Sable, Oct 13 '17 at 18:48
You can also do the same thing there. Redefine the `bg-primary` with an `!important` tag — arjun, Oct 13 '17 at 18:55
Possible duplicate of [How to override !important?](https://stackoverflow.com/questions/11178673/how-to-override-important) — Kevin B, Oct 13 '17 at 19:04

score 1 · Answer 1 · answered Oct 13 '17 at 18:52

You will have to override a lot of things ( `:hover' and 'disabled' among others) I'll suggest creating a new css class:

buttonColor {
   border: none;
   background-color: black;
   color: white; 
   padding: 10px 20px;

}
buttonColor:hover {
   cursor: pointer;
   background-color: white;
   color: black;  
}

Jesse Phillips · Answer 2 · 2017-10-13T19:40:53.157

Try:

.card.bg-primary {
  background-color: #3292a6 !important;
}

Here's why:

With CSS (Cascading Style Sheets) there is a concept called "specificity." My above rule will work because it uses two classes (.card & .bg-primary) instead of just 1 class (.bg-primary).

In general, to override bootstrap classes, I make my css rules more specific by adding a class in front (Note: this won't magically work, especially with Bootstrap nav! You have to inspect the styles, see which bootstrap rules are applied and create an even more specific rule. This can be tedius, and there are probably better, but more complicated ways.)

score 1 · Answer 3 · answered Oct 13 '17 at 19:46

There are two common approaches.

If you want to only override it in a few places, then Jesse Phillips's primacy solution is best, but if you want to globally over-ride it and you have direct access to how the header is parsed, then you simply need to make sure that your CSS rule is included later in the document than the Bootstrap

<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/customStyle.css">

then all you have to do is add an !important tag to your rule that matches the class you want to override.

EDIT: A third option I sometimes see people recommend is to save the bootstrap.css locally to your server and remove the !important tag there, but this in not a good idea because you will loose this change if you ever try to update your bootstrap to a newer version.

score 0 · Answer 4 · answered Oct 13 '17 at 18:58

You would simply have to over ride the class with your own bg-primary class adding the !important tag there as well.

See this SO - How to override !important?

This Mozilla post - -https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important

score -1 · Answer 5 · answered Mar 05 '22 at 16:48

Two solutions that I don't see here yet:

Don't use Bootstrap. Learn how to write your own CSS.
Remove the class that is adding !important from the HTML element and re-write it in your own CSS files.

Fixing !important with more !important tags is not a way to write good CSS. Kill the source.

Overriding Bootstrap default !important color codes

5 Answers5