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.

it doesn't work....although i have got my solution...thanks anyway — user2978381, May 19 '14 at 06:28

score 13 · Answer 1 · answered Aug 10 '15 at 20:59

13

Try to use:

<hr class="separator">

This is what is on bootstrap docs.

answered Aug 10 '15 at 20:59

Marcel Kohls

1,650
16
24

score 7 · Answer 2 · answered Aug 31 '15 at 11:51

7

you can also use

<hr class="featurette-divider">

answered Aug 31 '15 at 11:51

aosphyma

177
2
2

score 5 · Accepted Answer · answered May 19 '14 at 06:15

5

Try thiss:

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

answered May 19 '14 at 06:15

paulalexandru

9,218
7
66
94

score 2 · Answer 4 · edited Mar 25 '18 at 14:46

2

Problem is not clear, would be better if you had jsfiddle or screenshot, you should use form control, or at least list control to order elements as you want

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

Here is http://jsfiddle.net/52VtD/5658/ maybe helps.

edited Mar 25 '18 at 14:46

StefansArya

2,802
3
24
25

answered May 19 '14 at 06:28

Medet Tleukabiluly

11,662
3
34
69

Though my intention is being fulfilled by your answer...radio button option doesn't work...thanks for your endeavor – user2978381 May 19 '14 at 06:42

score 0 · Answer 5 · answered May 16 '18 at 20:45

0

<!-- HR -->
<div class='col-sm-12 pb-3'>
    <hr>
</div>

answered May 16 '18 at 20:45

Tommy L

140
11

horizontal divider between button group in Twitter Bootstrap 3

5 Answers5