CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Booster
Booster

Reputation: 434

How easily overwrite Bootstrap CSS

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?

Upvotes: 0

Views: 225

Answers (3)

Aibrean
Aibrean

Reputation: 6422

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

Upvotes: 1

indubitablee
indubitablee

Reputation: 8216

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

Upvotes: 0

Quentin
Quentin

Reputation: 944556

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.

Upvotes: 1

Related Questions