how to style a single character in bootstrap-vue label

Question

I can't figure it out, how to style a single character in the bootstrap-vue label:

<b-form-group 
  class="text-left"
  label-cols="4" 
  label-cols-lg="3" 
  label="Name*:" <--- how to style the single * ?
 >
  <b-form-input
    v-model="inputName" 
    placeholder="Name"
  />
</b-form-group>

I've tried using template strings but can't get anywhere.

Do you have any ideas on how I can colorize the individual star *?

---

I am using "bootstrap-vue": "2.14.0" and "vue": "2.6.10"

thanks!

Answer 1

You could use the label slot :

<b-form-group 
  class="text-left"
  label-cols="4" 
  label-cols-lg="3" 

 >
  <template #label>
     Name <span style="color:red">*</span> :
  </template>
  <b-form-input
    v-model="inputName" 
    placeholder="Name"
  />
</b-form-group>