title: Set a button group's width to 100% and make buttons equal width?
body: <p>I'm using Bootstrap, and I'd like to set an entire <code>btn-group</code> 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. </p>
  
  <p>I've made a JSFiddle here: <a href="http://jsfiddle.net/BcQZR/12/" rel="noreferrer">http://jsfiddle.net/BcQZR/12/</a></p>
  
  <p>Here is the HTML: </p>
  
  <pre><code>&lt;div class="span8 background"&gt;
  &lt;div class="btn-group btn-block" id="colours"&gt;
  &lt;span class="btn"&gt;&lt;input type='checkbox' name='size' value='red'/&gt;red&lt;/span&gt;
  &lt;span class="btn"&gt;&lt;input type='checkbox' name='size' value='orange'/&gt;orange&lt;/span&gt;
  &lt;span class="btn"&gt;&lt;input type='checkbox' name='size' value='yellow'/&gt;yellow&lt;/span&gt;
  &lt;/div&gt; &lt;!-- /btn-group --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my current CSS, which doesn't work:</p>
  
  <pre><code>#colours { 
    width: 100%;
  }
  </code></pre>