CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user6830922
user6830922

Reputation:

external CSS file can't get class

So I have this navbar:

<nav class="navbar navbar-default" style="background: black; margin-bottom: 0;">

And it's working fine. However when I'm trying to change styles in external CSS file instead of inline:

.navbar-default {
background: black; 
margin-bottom: 0;
}

They are not working at all. CSS file is working fine since I checked and bg pictures are changing. I have problem only with navbar and can't figure it out. According to this: Change navbar color in Twitter Bootstrap 3 I'm doing everything fine. It's first time I'm having this issue. Working with bootstrap if anyone is wondering :)

Any help guys? I dont want to use inline css.

Upvotes: 1

Views: 210

Answers (4)

Jay Desai
Jay Desai

Reputation: 241

I have faced same problem and after searching alot i have found that as navbar-default is default class of bootstrap and its not overloaded by external css file.You can use !important property of css that will help you to load external css file when there default class are overloaded.

.navbar-default {
    background: black !important; 
    margin-bottom: 0 !important;
}

Upvotes: 0

Hitesh Misro
Hitesh Misro

Reputation: 3461

You need to override the Bootstrap classes, Use !important to get it work

.navbar-default {
    background: black !important; 
    margin-bottom: 0 !important;
}

Note: If you use !important all other rules used in your CSS cannot override this declaration.

Upvotes: 1

Kumar
Kumar

Reputation: 280

I think default bootstrap navbar style is applying so try !important in front of property value.

.navbar-default {
background: black !important; 
margin-bottom: 0 !important;
}

Upvotes: 0

hairmot
hairmot

Reputation: 2975

Chances are your styles are being overridden as these styles are being set elsewhere. The C in css stands for cascading. See the cascading order section of this page

The easy option is to simply include your stylesheet after the bootstrap one.

Of course you can override this precedence by adding !important to the end of your style rules but this breaks some of the functionality of CSS and can become difficult to maintain.

Upvotes: 0

Related Questions