Question

I’m using a Bootstrap .btn-group and toggling the button pressed to the active state like a radio button. I’m finding that there is not enough contrast on the button to tell that is was selected when setting it to .active state. I poked around the Less files and it looks like the .active removes the gradient background and adds a box shadow. Can anyone tell me an easy(not too invasive) way to darken the .active state of a .btn in .btn-group in Bootstrap?

Answer 1

.btn.active {background-color} is defined at buttons.less line 50, but the “not too invasive” way for customizing this is to add add the following rule to your CSS and don’t touch original Less.

.btn.active, .btn:active {
    background-color: #XXXXXX;
}