title: Styling bootstrap themed checkbox with label on single line
body: <p>I am attempting to utilize the bootstrap "form-control" class on a checkbox within a label tag so that clicking the text also checks the textbox. </p>
  
  <p>Here is the JSFiddle: <a href="https://jsfiddle.net/vpm13m2b/" rel="nofollow noreferrer">https://jsfiddle.net/vpm13m2b/</a></p>
  
  <p>The HTML for the control is:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;div&gt;
          Attempt #1
          &lt;span class="red"&gt;*&lt;/span&gt;
      &lt;/div&gt;
      &lt;label&gt;
          &lt;input type="checkbox" class="form-control" /&gt; Yes
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;div&gt;
          Attempt #2
          &lt;span class="red"&gt;*&lt;/span&gt;
      &lt;/div&gt;
      &lt;label class="checkbox-inline"&gt;
          &lt;input type="checkbox" class="form-control" /&gt; Yes
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With attempt 1, the "Yes" text is pushed to a separate line. With attempt 2, the checkbox and underlying controls are pulled the width of the page, which also pushes the "Yes" text to the second line. The screenshot of this is below:</p>
  
  <p><img src="https://i.stack.imgur.com/6LHC5.png" alt="broken screenshot"></p>
  
  <p>Here's what I am trying to do:</p>
  
  <ul>
  <li>The styled checkbox is displayed next to the "Yes"</li>
  <li>Selecting the text also selects the checkbox</li>
  <li>Keep the solution clean (trying to avoid dealing with <code>float:left</code> or jquery click events on the text to check the checkbox)</li>
  </ul>
  
  <p>It just seems that there has to be a vanilla way to do this. All the bootstrap docs just show standard checkboxes - nothing with the <code>form-control</code> class styling the checkbox for their nice inline examples.</p>