Changing color of Twitter bootstrap Nav-Pills
Bootstrap 4.x Solution
.nav-pills .nav-link.active {
background-color: #ff0000 !important;
}
You can supply your own class to the nav-pills
container with your custom color for your active link, that way you can create as many colors as you like without modifying the bootstrap default colors in other sections of your page. Try this:
Markup
<ul class="nav nav-pills red">
<li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
<li><a href="#tab2" data-toggle="tab">Sample</a></li>
<li><a href="#tab3" data-toggle="tab">Sample</a></li>
</ul>
And here is the CSS for your custom color:
.red .active a,
.red .active a:hover {
background-color: red;
}
Also, if you prefer to replace the default color for the .active
item in your nav-pills
you can modify the original like so:
.nav-pills > .active > a, .nav-pills > .active > a:hover {
background-color: red;
}
The most voted solution did not work for me.(Bootstrap 3.0.0) However, this did:
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color:black;
background-color:#fcd900;
}
including this on the page <style></style>
tags serves for the per page basis well
and mixing it on two shades gives a brilliant effect like:
<style>
.nav-pills > li.active > a, .nav-pills > li.active > a:focus {
color: black;
background-color: #fcd900;
}
.nav-pills > li.active > a:hover {
background-color: #efcb00;
color:black;
}
</style>
For Bootstrap 4.0 (in alpha as of the moment of typing) you should specify the .active
class on the a
element.
For me only the following worked:
.nav-pills > li > a.active {
background-color: #ff0000 !important;
}
The !important
was also necessary.
--
Edit: added space before the !important
according to comment below by CodeMantle