Changing defaults without !important

Question

Trying to figure out the structure, but how can I change the defaults for things? Such as the button colors? Right now I'm creating a styles.css and doing:

.btn-primary { background-color: green !important }

I'd like to avoid using !important for over rides for stuff like that. Any help would be greatly appreciated.

score 1 · Answer 1 · answered Mar 25 '18 at 04:18

Something that I have found very useful is running the page locally and using the Google Chrome DevTools. If you look at the styles tab it will allow you to inspect your element so you can see if and from where your styles are inherited from. Usually I just need to make sure I use a more specific selector.

DevTools Overview: https://developer.chrome.com/devtools

score 0 · Answer 2 · answered Mar 25 '18 at 03:39

It seems like you're running into a specificity issue. There's a good breakdown on specificity on MDN here. Check to see if btn-primary is being wrapped in other classes and overriding your custom CSS. Also try adding an ID to the parent container of your button, and then targeting your custom CSS like:

#button-parent-container {
   .btn-primary {
     // your code here.
  }
}

If you aren't using SASS, then your declaration would be:

 #button-parent-container .btn-primary {
   // your code here
 }

score 0 · Answer 3 · answered Mar 25 '18 at 03:41

You shouldn't have to use important at all just make sure you are loading your custom css after bootstraps css like so:

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

Then you shouldn't have to use important to override css here is a fiddle to show you this in action Fiddle Demo

Changing defaults without !important

3 Answers3