title: horizontal divider between button group in Twitter Bootstrap 3
body: <p>I am trying to put some text between a radio button group....I have tried both </p>
  
  <pre><code>&lt;hr&gt;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>&lt;br&gt;
  </code></pre>
  
  <p>tag. But it doesn't work... The text always sticks to the button group..This is my code</p>
  
  <pre><code>&lt;div class="btn-group btn-group-sm" data-toggle="buttons"&gt;
  
            &lt;label class="btn btn-default"&gt;
      &lt;input type="radio" name="options" id="option1"&gt; &lt;span class="glyphicon glyphicon-music"&gt; MP3&lt;/span&gt;&lt;/label&gt;
           &lt;label class="btn btn-default"&gt;
      &lt;input type="radio" name="options" id="option2"&gt; &lt;span class="glyphicon glyphicon-music"&gt; WAV&lt;/span&gt;&lt;/label&gt;
  
  &lt;hr&gt;
  &lt;p&gt;Use conversion tools&lt;/p&gt;
  
  &lt;label class="btn btn-default"&gt;
      &lt;input type="radio" name="options" id="option3"&gt; &lt;span class="glyphicon glyphicon-film"&gt; MKV&lt;/span&gt;&lt;/label&gt;
          &lt;label class="btn btn-default"&gt;
      &lt;input type="radio" name="options" id="option4"&gt; &lt;span class="glyphicon glyphicon-film"&gt; FLV&lt;/span&gt;&lt;/label&gt;
   &lt;/div&gt;  
  </code></pre>
  
  <p>My intention is to create some gap or using a divider between group choice.</p>