CODEWITHSUNDEEP
twitter-bootstrapbuttongroup
Grigor
Grigor

Reputation: 4049

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?

Upvotes: 4

Views: 7773

Answers (1)

Ezequiel Muns
Ezequiel Muns

Reputation: 7742

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.

Upvotes: 2

Related Questions