4

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?

Ezequiel Muns
  • 7,492
  • 33
  • 57
Grigor
  • 4,139
  • 10
  • 41
  • 79

1 Answers1

2

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.

Ezequiel Muns
  • 7,492
  • 33
  • 57
  • 1
    Responsive is **very different** from fluid. Static span(px) vs fluid span(%) - responsive for different resolutions. Your solution is good but would not work with the responsive design : [jsfiddle](http://jsfiddle.net/Sherbrow/S57SW/2/) – Sherbrow Aug 13 '12 at 13:26
  • @Sherbrow I've updated to reflect your insight. For a responsive design this indeed totally breaks down once you've got a small enough viewport :( – Ezequiel Muns Aug 14 '12 at 02:10
  • How would I achieve the same for 9 elements in a btn-group. See http://jsfiddle.net/j8baM/2/ – iElectric Feb 16 '13 at 04:08
  • @iElectric the Bootstrap grid system has up to 12 'boxes', since 12 isn't divisible by 9, you would have to use 9 span1 buttons, but they won't take up the whole row's width (You could also have 3 buttons be span2, and six be span1 to cover the whole row, but would look weird:) – Ezequiel Muns Feb 19 '13 at 17:22
  • I added percentage 12% width to each of 7 buttons and 8% to the last two. Adding responsive features wanst that hard :) – iElectric Feb 19 '13 at 20:53