parsecer parsecer - 1 year ago 75
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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download