Bootstrap vue: form-group label styling

Question

I am trying t style label for form-group in bootstrap vue, but it's not working. I have try everything but no luck. I could really need some help how to do this.

.add-style label {

color: red;

}

<b-container>

<b-form-group class="add-style" label="Product Name">
          <b-form-input type="text" id="pName" required
                        placeholder="Enter product name"/>
        </b-form-group>

</b-container>

Answer 1

You can do it in this way:

<b-container>

<b-form-group class="add-style">
          <label style="color: red;" for="pName">Product Name:</label>
          <b-form-input type="text" id="pName" required
                        placeholder="Enter product name"/>
        </b-form-group>

</b-container>

Or, if you don't want to use inline css then you can do it in this way:

Css:

label {
    color: red;
}

Html:

<b-container>

    <b-form-group class="add-style">
              <label for="pName">Product Name:</label>
              <b-form-input type="text" id="pName" required
                            placeholder="Enter product name"/>
            </b-form-group>

    </b-container>