title: Pre-toggle a button in Bootstrap's btn-group?
body: <p>I would like to set a selected button in Bootstrap's <code>btn-group</code>:</p>
  
  <pre><code>&lt;div class="btn-toolbar"&gt;
   &lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default"&gt;5&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;6&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;7&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default"&gt;8&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I pre-select option 5? <a href="https://stackoverflow.com/questions/9551628/how-can-i-pre-toggle-a-button-in-bootstraps-btn-group">This answer suggests</a> that I can add <code>active</code> class to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect. </p>
  
  <p>Here is a fiddle: <a href="http://bootply.com/90490" rel="noreferrer">http://bootply.com/90490</a> </p>
  
  <p>Here is another fiddle with the <code>active</code> class applied, showing why it isn't the correct solution: <a href="http://bootply.com/90491" rel="noreferrer">http://bootply.com/90491</a> - click on any of the other buttons, and button 5 still remains active. </p>