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?
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.
btn-primary has white text on a blue background. Adjust the default colors using the --button-color and --button-background-color custom properties.
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.
.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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With