Twitter Bootstrap: proper way of aligning checkbox with checkbox label

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.

It is absolutely valid to include an input inside a label. There is nothing wrong with that code assuming you are using HTML5 otherwise you need to use a self closing input tag: <input type="checkbox" />. Ignore JSFiddles red highlighting. It doesn't deal well with HTML5 tags that no longer need to be closed. — Turnip
– Turnip, Commented Nov 6, 2014 at 12:41

micebrain · Accepted Answer · 2014-11-06 13:45:16Z

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>

edited Nov 6, 2014 at 13:45

answered Nov 6, 2014 at 13:03

micebrain

5762 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Sonderson Over a year ago

Thank you for your reply. I've tried your suggestion but as a side effect either the code that precedes the checkbox and its text or the code that follows the checkbox and its text is on the same line as the checkbox and its text. How do I fix this? Thanks.

micebrain Over a year ago

You can either wrap only the label and input tag in a div, or use a br tag for line break. Please see edited answer for example

micebrain Over a year ago

by the way, here is the example on Bootstrap website getbootstrap.com/css/#forms

Collectives™ on Stack Overflow

Twitter Bootstrap: proper way of aligning checkbox with checkbox label

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related