Bootstrap 3 btn-group width

Question

I have another Bootstrap related problem. I want to add radio and checkboxes to my form, I would like them also to take 100% width of form element.

I've added button group as this:

<div class="form-group">     <label class="col-sm-3 control-label">Subscribe</label>     <div class="col-sm-9">         <div class="btn-group input-group" data-toggle="buttons">             <label class="btn btn-success">                 <input type="radio" name="options" id="option1" />Yes</label>             <label class="btn btn-primary">                 <input type="radio" name="options" id="option2" />Maybe</label>             <label class="btn btn-danger">                 <input type="radio" name="options" id="option3" />No</label>         </div>     </div> </div> 

This gives me nice radio-like buttons:

But as You can see they have fixed width. Can this be fixed with bootstrap classes? Again here is my sample code: http://jsfiddle.net/Misiu/yy5HZ/5/

Answer 1

Use the built in .btn-group-justified class: Offical Docs

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

Anchors:

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">      <a href="#" class="btn btn-default" role="button">Left</a>     <a href="#" class="btn btn-default" role="button">Middle</a>     <a href="#" class="btn btn-default" role="button">Right</a>  </div> 

Buttons:

To use justified button groups with <button> elements, you must wrap each button in a button group. Most browsers don't properly apply our CSS for justification to <button> elements, but since we support button dropdowns, we can work around that.

<div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">   <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> 

JSFiddle

Answer 2

You can simply use the bootstrap col-n classes so if you have 2 buttons you use col-xs-6 on them. The problem is when you have 5 buttons for example. There is no class for that in the bootstrap grid system. So I woul use one of the following:

To differenciate between groups with different number of buttons use additional custom classes:

JSFiddle

CSS

.btn-group {     width: 100%; } .btn-group-2 label.btn  {     width: 50%; } .btn-group-3 label.btn  {     width: 33.3%; } 

HTML

<div class="btn-group btn-group-3 input-group" data-toggle="buttons">     <label class="btn btn-success">         <input type="radio" name="options" id="option1" />Yes</label>     <label class="btn btn-primary">         <input type="radio" name="options" id="option2" />Maybe</label>     <label class="btn btn-danger">         <input type="radio" name="options" id="option3" />No</label> </div> 

If you want to avoid these css classes you can only use jQuery:

JSFiddle

$('.btn-group').each(function(index, item) {     $(item).find('.btn').css(         'width', 100 / $(item).find('.btn').length + '%'     ) });