Search code examples
htmlvue.jsvuejs2labelbootstrap-vue

how to style a single character in bootstrap-vue label

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!

Solution

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