change the color of class active in bootstrap

Question

i'm trying to change the color of class active in my html code. i'm creating nav sidebar. here's my code:

<div class="col-sm-2">
                <ul class="nav nav-pills nav-stacked nav-static"> <!--stacked untuk jadi vertical -->
                    <li class="active"><a>Create Case</a></li>
                    <li><a href="wf-listofcase.php">List of cases</a></li>
                    <li><a href="linksofapps.html">Links of Apps</a></li>
                </ul>
    </div>

how to change its color? thanks before..

Solution 1

You can use:

.active a{
    color: red !important;
}

Or to avoid !important, use:

.nav-pills > li.active > a{
    color: red;
}

DEMO

Solution 2

The following code applies red color for all the anchor tags.

a {
   color: red !important;
  }

To apply the color only within the "nav-static" wrapper, use the following code.

.nav-static .active a{
   color: red !important;
}

Solution 3

If the above answers don't work try out -

.active a{
    background-color : red !important;
}