title: Bootstrap (radio) button group in multiple lines
body: <p>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.</p>
  
  <p>To this end I used bootstrap's class <code>btn-group-justified</code>, and I split the <code>&lt;input type="radio"&gt;</code> elements into several button groups, while keeping the same name.</p>
  
  <p>This looks ok, but has the side effect of buttons not toggling checked elements in other groups, even though they have the same <code>name</code>. That is, <strong>they stop behaving as radio buttons in the same group</strong>.</p>
  
  <p><strong>Jsfiddle <a href="https://jsfiddle.net/madariaga/brgoyb9d/3/" rel="noreferrer">here</a>.</strong> 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.</p>
  
  <p>Is there a way to get a multiple-line button group without hacking the radio behavior together with javascript? </p>