The Wanderer The Wanderer - 11 months ago 63
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>

<style> {
background-color: #123 !important;

Also, tried
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
element but the
element within it. I am suppose to modify the styling for
. 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 > > 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 {} 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 > > a,
.nav-tabs > > a:hover,
.nav-tabs > > a:focus {
  background-color /*here goes your background color*/