view raw
parsecer parsecer - 7 months ago 26
CSS Question

Bootstrap: Can't style navbar elements

I use Bootstrap's navigation:
It has the following structure:

<nav class="navbar navbar-inverse">

<!--<div class="container">
<a class="navbar-brand" href="#">SOME TITLE</a>

<div class="navbar-header" align="center">
<a class="navbar-brand shortcuts" href="#">Subtitle</a>

<ul class="nav navbar-nav mine lis">

<li><a href="second.jsp">Link1</a></li>

<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">List of links</a>

<ul class="dropdown-menu">
<li><a href="#">SLink1</a></li>
<li><a href="#">SLink2</a></li>

<li><a href="#">Link3</a></li>


And I have a main document that includes the navigation:

<jsp:include page="header.jsp"/>
<jsp:include page="navbar.jsp"/>

I need to add some extra style to the links of navigation, so I tried:

a {color:red;}



.navbar a {color:yellow;}

But neither works! What is the problem?

part is included in


As we have mentioned in comments, you need to override bootstrap's css, so using !important applies new CSS rules and answers your question :)

Also, make sure you don't use !important tag too often, it's not a good practise