Change Title Color Of Bootstrap Vue Tab Title

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

Solution 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.

Solution 2:

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

Solution 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">