I'm struggling to change the color of my tabs in Bootstrap 3. No matter what I try, my inactive tabs remain white and nothing seems to override it.
I found a suggestion on Stack Overflow to align my tabs to the left since it's no longer natively supported. However, this solution is preventing me from changing the tab colors in any state.
This is the code I'm using:
<div class="container">
<div class="normal">
<h2 style="text-align: center;">PRODUCTS + SERVICES</h2>
<div class="tabbable tabs-left">
<ul id="myTab" class="nav nav-tabs color">
<li class="active"><a href="#data" data-toggle="tab">DATA MANAGEMENT<br>
+ ANALYTICS</a></li>
<li><a href="#software" data-toggle="tab">CARE MANAGEMENT<br>SOFTWARE</a></li>
<li><a href="#callcenter" data-toggle="tab">CARE<br>COORDINATION<br>+ NURSING<br>CALL CENTER</a></li>
<li><a href="#financing" data-toggle="tab">FINANCING,<br>RISK POOLING<br>+ REINSURANCE</a></li>
<li><a href="#contracting" data-toggle="tab">CONTRACTING</a></li>
<li><a href="#admin" data-toggle="tab">ADMINISTRATION</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="data">
<p>TITLE</p>
<p>copy copy</p>
</div>
<div class="tab-pane fade" id="software">
<p>copy copy</p>
</div>
<div class="tab-pane fade" id="callcenter">
<p>copy copy</p>
</div>
<div class="tab-pane fade" id="financing">
<p>copy copy</p>
</div>
<div class="tab-pane fade" id="contracting">
<p>copy copy</p>
</div>
<div class="tab-pane fade" id="admin">
<p>copy copy</p>
</div>
</div>
</div> <!--end of TABS-->
</div> <!--end of normal-->
</div>
The CSS below shows everything I've attempted so far:
.tabs-left {
.nav-tabs {
border-bottom: 0;
}
.tab-content > .tab-pane,{
display: none;
}
.tab-content > .active,{
display: block;
}
.tabs-left, .tabs-right
> .nav-tabs > li {
float: none;
}
.tabs-left, .tabs-right
> .nav-tabs > li> a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
}
> li > a, a:hover, a:focus {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0...
If you have any suggestions or solutions, please let me know as I am currently stuck. Thank you!