Vertical alignment of two INPUT:RADIO groups in Bootstrap 3

Question

I cannot get two very simple groups of INPUT:RADIO to be vertically aligned:

<!-- Group 1 -->
<div class='radio btn-group' data-toggle='buttons'>

    <label class='btn btn-primary'>
        <input type='radio' name='grp1' />G1 Sel1
    </label>
    <label class='btn btn-primary'>
        <input type='radio' name='grp1' />G1 Sel2
    </label>
    <label class='btn btn-primary'>
        <input type='radio' name='grp1' />G1 Sel3
    </label>

</div>

<!-- Group 2 -->
<div class='radio btn-group' data-toggle='buttons'>

    <label class='btn btn-primary'>
        <input type='radio' name='grp2' />G2 Sel1
    </label>
    <label class='btn btn-primary'>
        <input type='radio' name='grp2' />G2 Sel2
    </label>

</div>

I have tried to use the btn-toolbar class but as it is not buttons, this will not work. There is no form as I just need to detect the click within the two groups.

JSFiddle demo, http://jsfiddle.net/kcPDH/

How can I get the two groups to be vertically aligned?

Answer 1

Please add these code to your code:

.radio + .radio, .checkbox + .checkbox {
    margin-top: 10px;
}

Demo