How to override a Bootstrap style

Question

How can I do to override an existing class of Bootstrap

The btn and activeclass 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";
}

shouldn't pseudo class be with a ":" ? Looking at your css .categories label#active . Unless you're trying to access the class "active" in which case it would be .active, not #active — Joe B., Jul 15 '17 at 21:42
Possible duplicate of [best way to override bootstrap css](https://stackoverflow.com/questions/20721248/best-way-to-override-bootstrap-css) — BSMP, Jul 15 '17 at 21:44
@JoeB. I tried also label:active. No success. label#btn:active. No success either — Maximus Decimus, Jul 15 '17 at 21:51
it's `.active` and remove the `"` https://codepen.io/mcoker/pen/owOgMV — Michael Coker, Jul 15 '17 at 22:02
Thank you I didn't realize that I had a " in my style. Going to the oculist right now. — Maximus Decimus, Jul 15 '17 at 22:05

score 0 · Accepted Answer · answered Jul 15 '17 at 21:53

0

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;
}

answered Jul 15 '17 at 21:53

Srichandradeep C

387
2
13

I tried that also but the F12 dev tools shows my style as Invalid property value with an icon of warning striking all the style. – Maximus Decimus Jul 15 '17 at 22:00
Someone else pointed out my error. I had a " at the end of my style. Thank you for your answer – Maximus Decimus Jul 15 '17 at 22:04
1

Ha ha. :) I already saw that but I thought it's a typo while copy-pasting the code from your source. BTW, you should not use !important unless you've no other workaround. – Srichandradeep C Jul 15 '17 at 22:05
You are right. Thanks for the comment and I am going to oculist right now. lol! – Maximus Decimus Jul 15 '17 at 22:06

score 0 · Answer 2 · answered Jul 15 '17 at 22:07

0

You can place an id on the label.

HTML

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

CSS

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

codepen

answered Jul 15 '17 at 22:07

Joe B.

1,124
7
14

How to override a Bootstrap style

2 Answers2