The horizontal separator between the button group in Twitter Bootstrap 3

Question

I'm trying to put text between a group of radio buttons ... I tried both

<hr> 

and

 <br> 

tag. But this does not work ... Text always refers to a group of buttons. 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> 

I intend to create some space or use a separator between group choices.

Answer 1

Try the following:

 <div class="clearfix"></div> <br><br> 

Answer 2

Try using:

 <hr class="separator"> 

This is what is found in bootstrap docs.

Answer 3

you can also use

 <hr class="featurette-divider"> 

Answer 4

The problem is not clear, it would be better if you had a jsfiddle or a screenshot, you should use the form control or at least manage the list of order items as you want

 <div class="list-group"> <div class="list-group-item"></div> </div> 

Here http://jsfiddle.net/52VtD/5658/ can help.