Bootstrap left align checkbox in horizontal form
<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>