parsecer parsecer - 1 month ago 8
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>-->

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

<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>
</ul>
</li>

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


</ul>
</nav>


And I have a main document that includes the navigation:

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


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

<style>
a {color:red;}

</style>


and

<style>
.navbar a {color:yellow;}
</style>


But neither works! What is the problem?

EDIT: The
<style>..</style>
part is included in
<html><head>...</head>
.

Answer

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