How to change active link color in bootstrap css?

In order to do what your are trying to do you must first understand a:hover Must come after a:link and a:visited in the CSS definition in order to be effective. If they are not in this order then they will not work.

Second is you must understand that if you where thinking (a:active) meant the color of the current link the end user was on, this is incorrect. (a:active) changes the color when you click on the link. You can test this by holding down the mouse button on the link that you made a different color with the (a:active).

Finally, if you are trying to do this using just CSS you have to add a specific class on the current link that the end user is on. Below I left you an example hope this helps :)

Your Navigation Bar As Follows
-Home
-Russia
-Italy

We are on the Italy Page For This Example:

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li class="activePage"><a href="http://yourdomain.com/page3.html">Italy</a></li><!--Page End User Is On-->
    <!--Look UP ^^^^^^^^ Hope this helps :)-->
  </ul>
</div>

Notice I did not put the .activePage tag in the other links? What this does is allow your original colors that you choose in your css for your navigation bar to still take place while the page that is active stays solid with a different color.

The reason this worked is because I added !important at the end of the color for that separate class.

.activePage {
  color: #0CF !important
}

Home Page

/*YOUR CSS SHOULD LOOK LIKE THIS*/

/* unvisited link grey */
#top-menu a:link {
	color: #777;
}
/* visited link grey */
#top-menu a:visited {
	color: #777;
}
/* mouse over link blue */
#top-menu a:hover {
	color: #0CF;
}
/* selected link blue */
#top-menu a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

<div id="top-menu">
  <ul class="nav menu nav-pills topmenu">
    <li class="activePage"><a href="http://yourdomain.com/page1.html">Home</a></li>
    <li><a href="http://yourdomain.com/page2.html">Russian</a></li>
    <li><a href="http://yourdomain.com/page3.html">Italy</a></li>
  </ul>
</div>

I suggest you creating an ID (#) selector locally for the Div that contains the a links, then take that id name in your style-sheet and override the existing rule.

For instance,

#abc a{xxx:xxx;}
#abc a:active{xxx:xxx;}

Hope this helps.

Finally with experiments I found how to capture it.

#top-menu .current a
{
    color: orange !important;
}

Thank you everyone for your time and help. Much appreciated!