I am experimenting with tabs in Bootstrap-Vue. I am trying to adjust the styling on an active tab. From the documentation at https://bootstrap-vue.org/docs/components/tabs#active-classes, I've seen this example that changes the active tab styling. I understand that I am to modify the active-nav-item-class attribute, like so:
<b-tabs
active-nav-item-class="font-weight-bold text-success"
active-tab-class="font-weight-bold text-success"
content-class="mt-3"
>
In my JSFiddle which you can see at https://jsfiddle.net/b4o1kL2f/1/, I am similarly trying to set the active-nav-item-class to a class style in CSS, by binding it with Vue:
<b-tabs pills vertical :active-nav-item-class="'tab-active-class'">
Here is the CSS:
.tab-active-class {
background-color: red;
}
But it seems like the active tab background color is not changing. Can anyone spot what I might be doing wrong? Thanks so much!
The class is applying to the HTML element but the problem is that .nav-link.active has specificity more than .tab-active-class, So you have to increase the specificity of .tab-active-class
.nav-link.active.tab-active-class {
background-color: red;
}
or
.tab-active-class {
background-color: red !important;
}