The Wanderer The Wanderer - 2 months ago 9
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

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*/
}
Comments