CODEWITHSUNDEEP
csstwitter-bootstraptabs
david sinfield
david sinfield

Reputation: 111

How to override the style of Bootstrap active tab?

I'm trying to override the active tab style in bootstrap.

I've managed to give the tabs rounded corners and changed to colour by giving the <li> tags a new class so the appearance is pretty well what I want for appearance and hover. The active tab however is stubbornly staying with the bootstrap style. I've tried all kinds of selectors to get specific enough but I'm stuck now. I can't see how to get more specific for the active selector:

.nav-tabs > li.rounded.active > a,
.nav-tabs > li.rounded.active > a:hover,
.nav-tabs > li.rounded.active > a:focus {
    background-color:cadetblue;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

And this is my html:

<ul class="nav nav-tabs">
   <li class="rounded"><a href="#">Home</a></li>
   <li class="rounded"><a href="#">Bio</a></li>
   <li class="rounded"><a href="#">Links</a></li>
   <li class="rounded"><a href="#">Gallery</a></li>
</ul>

Upvotes: 1

Views: 8083

Answers (2)

Karthik
Karthik

Reputation: 3

The css 'active' state should be applied to anchor tag. Try this,

.nav-tabs > li.rounded > a:active,
.nav-tabs > li.rounded > a:hover,
.nav-tabs > li.rounded > a:focus  {
    background-color:green;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

Upvotes: 0

tylerism
tylerism

Reputation: 679

I think that you might have some other code that is taking precedence, because I used the bootstrap.css addon for codepen.io and everything seems to work out. I was able to change the active tab style. BTW, in the html that you provided, there is no "active" tab, it is missing the class. Could this be the problem?

http://codepen.io/tylerism/pen/vOpNLO

HTML

<ul class="nav nav-tabs">
    <li class="rounded active"><a href="#">Home</a></li>
    <li class="rounded"><a href="#">Bio</a></li>
    <li class="rounded"><a href="#">Links</a></li>
    <li class="rounded"><a href="#">Gallery</a></li>
</ul>

CSS

.nav-tabs > li.rounded.active > a,
.nav-tabs > li.rounded.active > a:hover,
.nav-tabs > li.rounded.active > a:focus  {
    background-color:cadetblue;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color:orange;
}

.nav-tabs > li.rounded > a  {
    background-color:cadetblue;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color:white;
}

Upvotes: 5

Related Questions