javascript - Change title color of bootstrap vue tab title - Stack Overflow

admin管理员组

文章数量:1400503

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 () 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.

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/docs/ponents/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.

• javascript
• vue.js

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 5, 2018 at 7:19 Maryadi PoipoMaryadi Poipo 1,47899 gold badges3232 silver badges5555 bronze badges 2

• do you have any warnings in your console ?.. – Naveen K Commented Mar 5, 2018 at 7:28
• No... there is no warning or errors @Naveen – Maryadi Poipo Commented Mar 5, 2018 at 7:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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

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

本文标签： javascriptChange title color of bootstrap vue tab titleStack Overflow