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 !