How easily overwrite Bootstrap CSS

Question

I would like to ask why in the custom.css need use !important to overwrite some styles in bootstrap.css
like : input, button, navbar etc.

For example :

.navbar{
 background :#52B3D9;
 border-radius:0px !important;
 border-top:4px solid #1E8BC3 !important;}

It is possible to overwrite bootstrap.css without using !important?

Maybe it's impossible at some point since Bootstrap CSS already use it but just a few times. I don't see any question here ... — DaniP, Dec 22 '14 at 15:46
Are you referencing your custom.css after bootstrap.css in your html? — robjez, Dec 22 '14 at 15:50
@RomoDaneghyan This is a good answer for why `!important` is a bad practice: http://stackoverflow.com/a/3706876/3739498 — Aibrean, Dec 22 '14 at 15:56
You could just adjust the variable values and recompile Bootstrap's LESS source code. — cvrebert, Dec 22 '14 at 16:42

score 1 · Answer 1 · answered Dec 22 '14 at 15:46

You need to write a selector that is more specific than the selector you are overwriting (or equally specific but later).

A selector's specificity is calculated as follows:

count the number of ID selectors in the selector (= a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

count the number of type selectors and pseudo-elements in the selector (= c)

ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

score 1 · Answer 2 · answered Dec 22 '14 at 15:51

1

You just need to declare your CSS AFTER Bootstrap, rather than before. Then you use the same selector that is being used by Bootstrap.

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

If you were using LESS:

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

answered Dec 22 '14 at 15:51

Aibrean

6,297
1
22
38

Even if you give your selectors more specificity sometimes you will need to use `!important` since already bootstrap use this ... As an example `img{max-width:100%!important}` ...With search I can find 63 times the use of `!important` on the bootstrap.min version – DaniP Dec 22 '14 at 15:56
@Danko actually the max-width is going to be phased out because it conflicts with IE for the img. If you declare important, it's not going to overwrite what is already declared - you have to edit Boostrap itself. – Aibrean Dec 22 '14 at 15:57
Like I said, you can't overwrite !important with another !important. That's why you shouldn't use !important. It's a worst-case scenario, or for Bootstrap, it's for elements that they don't want overwritten (like the hide/show utilities). – Aibrean Dec 22 '14 at 16:01
You can override an !important with another !important .... ¬¬ http://jsfiddle.net/6vxpgf3y/ – DaniP Dec 22 '14 at 16:03
With a greater level of specificity. – Aibrean Dec 22 '14 at 16:04
1

@Aibrean, actually you can overwrite an !important with another !important. It just follows the cascading rules after that...the last !important will rule. Although this is obviously not good practice at all. [fiddle](http://jsfiddle.net/6was9vag/1/) – indubitablee Dec 22 '14 at 16:04
1

@Danko I just want understand more how it's possible to overwrite without !important – Booster Dec 22 '14 at 16:12

score 0 · Answer 3 · answered Dec 22 '14 at 15:48

!important is used to make sure that your custom changes overwrite bootstrap's changes. You can overwrite bootstrap css without the important, but you need to make sure that your custom css comes after bootstraps styles.

example:

div{
    background-color:blue;
}
div{
    background-color:red;
}

The above css colors the div element background color. the resultant color of the div is red because it is the latest style.

heres the fiddle

However, if you put blue !important, the color of the div will be blue no matter if it comes before or after the css to make the div red.

How easily overwrite Bootstrap CSS

3 Answers3