title: Bootstrap left align checkbox in horizontal form
body: <p>I'm using Bootstrap 3.3.7. I have a horizontal form with a label-less checkbox, like this:</p>
  
  <pre><code>&lt;div class="container-fluid" style="max-width:600px"&gt;
    &lt;form class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-sm-2" for="field1"&gt;Field 1:&lt;/label&gt;
        &lt;div class="col-sm-8"&gt;
          &lt;input class="form-control" type="text" id="field1"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-sm-2" for="field2"&gt;Field 2:&lt;/label&gt;
        &lt;div class="col-sm-8"&gt;
          &lt;input class="form-control" type="text" id="field2"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="control-label col-sm-2" for="field3"&gt;Field 3:&lt;/label&gt;
        &lt;div class="col-sm-8"&gt;
          &lt;!-- HERE IS THE CHECKBOX: --&gt;
          &lt;input class="form-control" type="checkbox" id="field3"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="col-sm-offset-2 col-sm-8"&gt;
          &lt;button class="btn btn-default btn-primary" type="submit"&gt;Apply Changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've created a <a href="http://www.bootply.com/R7RmWErF5y" rel="noreferrer">Bootply demo here</a>.</p>
  
  <p>The problem is the checkbox is centered. I wanted it to be left aligned, so the left edge is aligned with the left edge of the text inputs above it.</p>
  
  <p>How do I do that?</p>
  
  <p>I have tried:</p>
  
  <ul>
  <li>Adding class <code>text-left</code> to the div that contains the checkbox (result: no effect).</li>
  <li>Removing the grid width specifiers from the checkbox div (result: it just ends up on the next line).</li>
  <li>Enclosing the checkbox input in a <code>label</code> tag, a wild guess after reading <a href="https://stackoverflow.com/questions/24912377/bootstrap-form-horizontal-vertical-alignment-of-checkboxes-without-label-text">this post</a> (result: it disappears).</li>
  <li>Random hand-wavey rearrangements of divs (result: spirit crushed, git checkout to revert changes).</li>
  </ul>
  
  <p>I'm out of ideas.</p>