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?

Answer 1

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

Answer 2

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.

Answer 3

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;  
}

Answer 4

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