Twitter Bootstrap: proper way of aligning checkbox with checkbox label - html

Question

I am trying out the following three examples from the O'Reilly book
Bootstrap by Jake Spurlock. When I paste the code into JSFiddle
it highlights an error in red, presumably because embedding a checkbox
input element inside a label element does not produce valid HTML.
<!-- First example from book's Bootstrap CSS -> Forms section: -->
<form>
<fieldset>
<legend>Legend</legend>
<label for="name">Label name</label>
<input type="text" id="name" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox" for="checkbox">
<input type="checkbox" id="checkbox">
Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>
<!-- Second example from book's Bootstrap CSS -> Forms section: -->
<form class="form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
<!-- Third example from book's Bootstrap CSS -> Forms section: -->
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
In particular in all three cases the code that causes the HTML error is the following:
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
The following related post seems to deal with the same problem
but the code in the answer doesn't seem to fix the HTML problem I describe.
So what is the correct way to style the form in bootstrap so that the html
is valid, and so that the browser properly displays the checkbox followed
by the checkbox text on a single line by itself? I would prefer an answer
that does not require creating any custom CSS.

Answer 1

For the class for label should be control-label, checkbox is not valid
<div>
<label class="control-label">
<input type="checkbox">
Remember me
</label>
</div>
<button type="submit" class="btn">Submit</button>