The Wanderer The Wanderer - 1 year ago 77
CSS Question

Modify active tab class bootstrap

I'm trying to style the active tab class, but doesn't seem to be working. The background always appear white.

Here is the code:

<ul class="nav nav-tabs nav-justified">
<li class="active" id="id1" style="background-color: #234;"><a data-toggle="tab" href="#test1">test1</a></li>
<li><a data-toggle="tab" id="id2" href="#test2">test2</a></li>
</ul>

<style>
#id1.active {
background-color: #123 !important;
}
</style>


Also, tried
li > .active
,
li.active
,
nav-tabs > li > .active
but none of them seem to be working.

Never Mind: The background was appearing white not because of the
li
element but the
a
element within it. I am suppose to modify the styling for
a
. Did this:
.active > a {..}

Answer Source

If you're going to search for the .nav-tabs class inside the Bootstrap's CSS file and scroll down to the line where there's the .active class state, what you'll find is .nav-tabs > li.active > a, then that's the right place to edit its background.

NOTE: The :hover and :focus state are also sharing the same style as the normal active tab. You can also separate those two and give a different background-color style.

And if you're going to style the background-color of ul li.active {} the result will be the default CSS list (including all other classes like .nav-pills, .navbar-nav, etc) that has the .active class state will have the same background color which is not appropriate.

So your CSS will then be:

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color /*here goes your background color*/
}