CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-material-design
Jaron Pulver
Jaron Pulver

Reputation: 1

Changing defaults without !important

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.

Upvotes: 0

Views: 506

Answers (3)

Kyle Dacones
Kyle Dacones

Reputation: 11

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

Upvotes: 1

Steve K
Steve K

Reputation: 9055

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

Upvotes: 0

gturmel
gturmel

Reputation: 1

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
 }

Upvotes: 0

Related Questions