Set a button group's width to 100% and make buttons equal width?

Question

I'm using Bootstrap, and I'd like to set an entire btn-group to have a width of 100% of its parent element. I'd also like the inner buttons to take equal widths. As it is, I can't achieve either.

I've made a JSFiddle here: http://jsfiddle.net/BcQZR/12/

Here is the HTML:

<div class="span8 background"> <div class="btn-group btn-block" id="colours"> <span class="btn"><input type='checkbox' name='size' value='red'/>red</span> <span class="btn"><input type='checkbox' name='size' value='orange'/>orange</span> <span class="btn"><input type='checkbox' name='size' value='yellow'/>yellow</span> </div> <!-- /btn-group --> </div> 

And here is my current CSS, which doesn't work:

#colours {    width: 100%; } 

Answer 1

Bootstrap has the .btn-group-justified css class.

How it's structured is based on the type of tags you use.

With <a> tags

<div class="btn-group btn-group-justified" role="group" aria-label="...">    ... </div> 

With <button> tags

<div class="btn-group btn-group-justified" role="group" aria-label="...">   <div class="btn-group" role="group">     <button type="button" class="btn btn-default">Left</button>   </div>   <div class="btn-group" role="group">     <button type="button" class="btn btn-default">Middle</button>   </div>   <div class="btn-group" role="group">     <button type="button" class="btn btn-default">Right</button>   </div> </div> 

Answer 2

There's no need for extra css the .btn-group-justified class does this.

You have to add this to the parent element and then wrap each btn element in a div with .btn-group like this

    <div class="form-group">              <div class="btn-group btn-group-justified">                 <div class="btn-group">                     <button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>                 </div>                 <div class="btn-group">                     <button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>                 </div>             </div>          </div>