Bootstrap left align checkbox in horizontal form

Question

I'm using Bootstrap 3.3.7. I have a horizontal form with a label-less checkbox, like this:

<div class="container-fluid" style="max-width:600px">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="field1">Field 1:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field1"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field2">Field 2:</label>
      <div class="col-sm-8">
        <input class="form-control" type="text" id="field2"/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="field3">Field 3:</label>
      <div class="col-sm-8">
        <!-- HERE IS THE CHECKBOX: -->
        <input class="form-control" type="checkbox" id="field3"/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-8">
        <button class="btn btn-default btn-primary" type="submit">Apply Changes</button>
      </div>
    </div>
  </form>
</div>

I've created a Bootply demo here.

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.

How do I do that?

I have tried:

• Adding class text-left to the div that contains the checkbox (result: no effect).
• Removing the grid width specifiers from the checkbox div (result: it just ends up on the next line).
• Enclosing the checkbox input in a label tag, a wild guess after reading this post (result: it disappears).
• Random hand-wavey rearrangements of divs (result: spirit crushed, git checkout to revert changes).

I'm out of ideas.

Answer 1

Can you add a class to the checkbox? Try this:

<input class="form-control move-left" type="checkbox" id="field3">

.move-left {
    width: auto;
    box-shadow: none;
  }

Demo: http://www.bootply.com/At8YVfnm5F

Updated as per gyre's comment.

Answer 2

You can change the width initial or auto for the input id LiveOnBootplay

   input#field3 {
     width: auto;
    }

Answer 3

Try changing the class of the div enclosing your checkbox from col-sm-8 to col-sm-1 and then added a class of checkbox-inline to your input element.

Demo: http://www.bootply.com/kjF1gVtWDC

<div class="col-sm-1">
  <!-- HERE IS THE CHECKBOX: -->
  <input class="form-control checkbox-inline" type="checkbox" id="field3" />
</div>