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

Vaccine

Answer 1

You can use:

.active a{
    color: red !important;
}

Or to avoid !important, use:

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

DEMO

Housewife

Answer 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;
}

Thimbleful

Answer 3

If the above answers don't work try out -

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

Orman

Answer 4

for each a tag element add this

<a onclick="addHighlightedClass(event)" 

then add this script to your page

  <script>
          function addHighlightedClass(event) {
            var target = event.currentTarget;
            if (window.previewHighlited)
              window.previewHighlited.classList.remove("active");
        
            target.classList.add("active");
            window.previewHighlited = target;
          }
  </script>

here is a demo https://jsfiddle.net/bilalmix12/vkouxb7a/3/

Melone