<p dir="auto">When you click a button of a toggle-able button group (using: data-toggle="buttons"), the radio button's parent label gets the 'active' class.</p>
<p dir="auto">But when you load a form that has a checked radio button, the respective label does NOT get that 'active' class. The button thus appears to be unclicked although its hidden radio button is checked.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;btn-group&quot; data-toggle=&quot;buttons&quot;&gt;
  &lt;label class=&quot;btn btn-primary active&quot;&gt; &lt;=== This class is not added onload
    &lt;input type=&quot;radio&quot; name=&quot;options&quot; id=&quot;option1&quot; checked=&quot;checked&quot;&gt; Option 1"><pre class="notranslate"><code class="notranslate">&lt;div class="btn-group" data-toggle="buttons"&gt;
  &lt;label class="btn btn-primary active"&gt; &lt;=== This class is not added onload
    &lt;input type="radio" name="options" id="option1" checked="checked"&gt; Option 1
</code></pre></div>
<p dir="auto">Example at: <a href="http://jsbin.com/UFoRIYex/244/edit?html,js,output" rel="nofollow">http://jsbin.com/UFoRIYex/244/edit?html,js,output</a></p>