Reputation: 5106

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>.

Upvotes: 1

Answers (3)

Raimonds

Reputation: 537

If you want to override bootstrap class just add class or id to your parent container and prefix your styles with it, that should do. CSS allways picks up most specific selector available if they are the same then it takes last option

Upvotes: 1