Home/ Questions/Q 9093647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T23:09:20+00:00

I’m using Bootstrap, and I’d like to set an entire btn-group to have a

  • 0

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%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0