Twitter Bootstrap Question posted in

external CSS file can't get class – Twitter bootstrap

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.

Tags:

4

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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;
}
    Login or Signup to reply.
  4. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search