Why your CSS may not work on Bootstrap Elements

Feel free to add, delete, change, where relevant - especially if there are already topics and/or links like that on the forums…just update !

It’s a very common problem, people asking "why doesn’t my <a> link to color:red; work?

Keep in mind that the Boostrap classes you apply to your html (say ```<nav class=“navbar navbar-default”`` and the like are already css styled.

So what you’re doing with your CSS is overriding that. It’s absolutely fine, but Bootstrap’s built-in CSS is often more specific than yours, which means that the browser will favor Bootstrap over your CSS.

To avoid that, make sure your CSS is at least as specific as Bootstrap’s.

There’s an easy way to check that: open the Inspector and inspect the element in question. You are likely to see that your styling is barred, and if you look elsewhere you’ll find the same element targeted by Bootstrap CSS. You then just have to “copy” the way it is targeted, for example .navbar .navbar-inverse >li >a{.... (that is, more specific than just a{....).

Another important point (thanks @michealhall ): make sure your CSS stylesheet is linked after your link to Bootstrap - again, it’s a matter of who wins !

5 Likes

All of the above is great and correct advice. The only thing I would add - just to state what should be obvious - make sure your styles are declared after Bootstrap, otherwise Bootstrap will still take precedence in the cascade.

4 Likes

thank you, I should have mentioned it (done). Next time feel free to update the wiki yourself - that’s what it’s for :relaxed: and that way we can limit having too many comments in the thread. I know, I’ve just added one… Duh.