I have set up a Bootstrap tab/pills nav thing. I have 3 tabs: "adopt", "donate" and join. I want it so that the content background matches the color of the active tab.
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active"><a class="adopt-tab" href="#1a" data-toggle="tab">ADOPT</a></li>
<li><a class="donate-tab" href="#2a" data-toggle="tab">DONATE</a></li>
<li><a class="join-tab" href="#3a" data-toggle="tab">JOIN</a></li>
</ul>
</div>
So far I have managed to set it so that each pill has a different color, and the first tab's content matches the color of the pill. However, the other tab's content are currently using the same color...
#exTab1 .tab-content {
color : white;
padding : 5px 15px;
background-color: #EF476F;
}
I assume I have to link it to the ID (#1a, #2a, #3a) but I haven't found a way for each tab to have a different color.
Here is a codepen link which hopefully explains what i mean.
Numbers shouldn't be used as the first char for id="" attributes, therefore the #exTab1 .tab-content > #2a CSS selector isn't working. However, you can select the tabs id's in CSS like this...
https://www.codeply.com/go/uhGzMhFlQs
#exTab1 .tab-content > [id='1a'] {
background-color: #EF476F;
}
#exTab1 .tab-content > [id='2a'] {
background-color: #FF6663;
}
#exTab1 .tab-content > [id='3a'] {
background-color: #FFD166;
}
Update for Bootstrap 4
Here is a working example for Bootstrap 4. The .active class should now be placed on the nav-link and CSS updated accordingly. Also, it's not good practice the give elements id= that start with numbers (1a, 2a, 3a, etc...). Consider renaming the tabs to a1, a2, a3, etc...