如何覆盖引导样式

Question

How can I do to override an existing class of Bootstrap

The btn and active class names are added automatically from Bootstrap. I want a specific color on the inset.

        <div class="categories">
            <label class="ng-binding">Categories</label>
            <div class="btn-group" data-toggle="buttons">
                  <label class="btn active">
                    <input type="radio" name="cat" id="rbOption1"> Cat 1
                  </label>
                  <label class="btn">
                    <input type="radio" name="cat" id="rbOption2"> Cat 2
                  </label>
            </div>
        </div>

I've been trying to do this with no positive result

.categories label#active {
    box-shadow: inset 0 3px 5px blue !important";
}

Answer 1

As per my understanding of the question, this is what you have to do in order to override the Bootstrap style.

.categories .btn.active {
   box-shadow:inset 0 3px 5px blue;
 }

If you want to use the same style through out your application or page,

.btn.active {
   box-shadow:inset 0 3px 5px blue;
}

Answer 2

You can place an id on the label.

HTML

<label id="active" class="btn">

CSS

#active {
 box-shadow: inset 0px 0px 10px #FF0000;
}

codepen