Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change btn-group .active style in Twitter Bootstrap

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?

like image 351
Pad Avatar asked Sep 05 '12 14:09

Pad


People also ask

How do I change the color of BTN in bootstrap?

Using one of the default modifier classes will change the color of the text and background color of your buttons. .Btn-danger will make the button red and font white, while . btn-warning will make the button yellow and font black, and so on.

How do I change the color of my BTN-primary?

btn-primary has white text on a blue background. Adjust the default colors using the --button-color and --button-background-color custom properties.

How do I center my BTN-Group in bootstrap?

Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap. It will work in both Bootstrap 3 and 4 versions.


1 Answers

.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;
}
like image 82
albertedevigo Avatar answered Oct 07 '22 18:10

albertedevigo