Richard Richard - 8 months ago 98
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

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:

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 -->

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

#colours {
width: 100%;


BOOTSTRAP 2 (source)

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

.btn {width:20%;}


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).


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