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%;
}
Bootstrap has the .btn-group-justified
css class.
How it's structured is based on the type of tags you use.
With <a>
tags
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
With <button>
tags
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<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>
There's no need for extra css the .btn-group-justified
class does this.
You have to add this to the parent element and then wrap each btn element in a div with .btn-group like this
<div class="form-group">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="submit" id="like" class="btn btn-lg btn-success ">Like</button>
</div>
<div class="btn-group">
<button type="submit" id="nope" class="btn btn-lg btn-danger ">Nope</button>
</div>
</div>
</div>