Change title color of bootstrap vue tab title

Question

I'm using bootstrap-vue.js to create a tab. The result is like this

I just want change the tab title color because it's using default color from my project. And from the bootstrap-vue.js official link (https://bootstrap-vue.js.org/docs/components/tabs) there is a title-item-class for making any change in the tab title. So I crate the code like this :

<b-tab title="Transaction History" title-item-class="tab-title-class">

and my css :

.tab-title-class {
    color: #FF0000 !important;  
}

But it doesn't give any effect. So what is the problem here ? Thanks in advance.

Answer 1

Use v-bind directive to apply the custom class and also use a quote to denote it's a string:

<b-tab title="Transaction History" :title-item-class="'tab-title-class'">

:title-item-class is just an alias for v-bind:title-item-class

It's because bootstrap vue uses props not simple html attributes. Where title is simply the html attribute and you don't need to use v-bind.

---

But I think, you need to apply :title-link-class. It's because link tag is being applied there.

<b-tab title="Transaction History" :title-link-class="'tab-title-class'">

While using v-bind, it checks for the types for the input. If that is undefined, then you'll get error. So, here we don't have such class defined in the data option but simply assigning a string class for css which will work fine.

Answer 2

Looks like you're missing a colon before title-item-class. Try <b-tab title="Transaction History" :title-item-class="tab-title-class">

Answer 3

if you are using style inside the same template like following,

<style>
.tab-title-class {
    color: #FF0000 !important;  
}
</style>

this will show warning in your console like,

"[Vue warn]: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as < style >. "

and those styles are not parsed.

use this style in some external css to work.

also use v-bind for the class

<b-tab title="Transaction History" :title-item-class="tab-title-class">