Bootstrap button group colour

1
votes

Is there any way to set the colour of all my buttons in a button group at the btn-group level?

For example, I am grouping 10 buttons, and I want them to all be green (btn-success)

At the moment, I have to set the style on each individual button. I can set the size of all the button by setting btn-group-xs on the button group div, but it doesn't work with colour.

Ideally, I don't want to be setting the style of every button in a group and would like to set the style on the group div so all buttons within receive that style - In particular its just the btn-success as I want them to all be green.

Is there anything within bootstrap I am missing or am I going to have to do some custom CSS?

Thanks

2
csstwitter-bootstraptwitter-bootstrap-3

2 Answers

2
votes

There is no predefined class like .btn-group-primary. The only way to address this within Bootstrap (currently) is to apply the colors as needed to the .btn.

That being said, you could do something simple with jQuery (since we're already using Bootstrap) to apply things a bit more automatically:

$('.btn-group-primary .btn').addClass('btn-primary');
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="btn-group btn-group-primary" role="group" aria-label="...">
  <button type="button" class="btn">Left</button>
  <button type="button" class="btn">Middle</button>
  <button type="button" class="btn">Right</button>
</div>
-1
votes

Working jsfiddle without bootstrap. working jsfiddle with bootstrap.

.btn-group button{
    background-color:green;
}