Richard Richard - 6 months ago 69
CSS Question

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

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

BOOTSTRAP 2 (source)

The problem is that there is no width set on the buttons. Try this:

.btn {width:20%;}

EDIT:

By default the buttons take an auto width of its text length plus some padding, so I guess for your example it is probably more like 14.5% for 5 buttons (to compensate for the padding).

Note:

If you don't want to try and compensate for padding you can use box-sizing:border-box;

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp