Bootstrap (radio) button group in multiple lines

Question

I have a button group of several items that have to behave as radio buttons. I also need them broken into several rows and spanning the entire width of the container.

To this end I used bootstrap's class btn-group-justified, and I split the <input type="radio"> elements into several button groups, while keeping the same name.

This looks ok, but has the side effect of buttons not toggling checked elements in other groups, even though they have the same name. That is, they stop behaving as radio buttons in the same group.

Jsfiddle here. As you can see, if you select a button on the first row and then click one on the second, the first element isn't toggled off.

Is there a way to get a multiple-line button group without hacking the radio behavior together with javascript?

Answer 1

This did the trick.

http://www.bootply.com/k067OmtNXt

<div data-toggle="buttons">
    <div class="btn-group btn-group-justified">
        <label class="btn btn-default">
            <input type="radio"> Lorem
        </label>
    </div>
    <div class="btn-group btn-group-justified">
        <label class="btn btn-default">
            <input type="radio"> ipsum
        </label>
    </div>
</div>