Twitter Bootstrap button group 50% width
I want to create a button group containing two buttons. The button group is part of the span 6 and I want the buttons inside have 50% width, but I guess because of padding and borders the buttons break line and go over each other instead of next to each other. What would the tweak be for this one?
Answer
This is happening indeed because of the margins and everything else that bootstrap adds to buttons.
You can do this by making use of the bootstrap grid system, instead of trying to assign a width to the buttons yourself.
<div class="span6">
<div class="btn-group row-fluid">
<button class="btn span6">Button 1</button>
<button class="btn span6">Button 2</button>
</div>
</div>
Here it is in action: http://jsfiddle.net/S57SW/1/.
I've used a row-fluid because that looks better on jsfiddle, but you could do this with a non-responsive static layout too.