horizontal divider between button group in Twitter Bootstrap 3

Question

I am trying to put some text between a radio button group....I have tried both

<hr>

and

<br>

tag. But it doesn't work... The text always sticks to the button group..This is my code

<div class="btn-group btn-group-sm" data-toggle="buttons">

          <label class="btn btn-default">
    <input type="radio" name="options" id="option1"> <span class="glyphicon glyphicon-music"> MP3</span></label>
         <label class="btn btn-default">
    <input type="radio" name="options" id="option2"> <span class="glyphicon glyphicon-music"> WAV</span></label>

<hr>
<p>Use conversion tools</p>

<label class="btn btn-default">
    <input type="radio" name="options" id="option3"> <span class="glyphicon glyphicon-film"> MKV</span></label>
        <label class="btn btn-default">
    <input type="radio" name="options" id="option4"> <span class="glyphicon glyphicon-film"> FLV</span></label>
 </div>  

My intention is to create some gap or using a divider between group choice.

Answer 1

Try to use:

<hr class="separator">

This is what is on bootstrap docs.