title: Buttons on the same line in twitter bootstrap
body: <p>There are buttons and one button group </p>
  
  <pre><code>%button.btn{type: :submit}button1
  %button.btn{type: :submit}button2
  %button.btn{type: :submit}button3
  
  .btn-group{"data-toggle" =&gt; "buttons-radio"}
    %button.btn.btn-primary.active{type: :button}
      button4
    %button.btn.btn-primary.active{type: :button}
      button5
    %button.btn.btn-primary.active{type: :button}
      button6
    %button.btn.btn-primary.active{type: :button}
      button7
  </code></pre>
  
  <p>I want all these 7 buttons to be on the same line. Now they are on the different lines: the 3 first ones on one line and the rest of them on a different line. Even if I add div on and place all them into it, nothing changes.</p>
  
  <p>How do I achieve that?</p>