Bootstrap Label Surrounding Checkbox and Input

Question

I'm making a form that has a checkbox that is inline with a text input. Here's what I did to make it look nice with bootstrap:

<label class="checkbox">
  <input type="checkbox" name="keywords" value="__option__">
  <input type="text" name="keywords_other_option" value="" placeholder="Other">
</label>

It looks good, but it doesn't function well. In firefox, the user can't type in the textbox. Is there a good bootstrap way to put the checkbox and the text input inline with each other?

Answer 1

Don't put two input elements inside one label element.

And here is Twitter Bootstrap way to solve this:

<form class="form-inline">
  <label class="checkbox">
     <input type="checkbox" name="keywords" value="__option__">
  </label>
  <input type="text" name="keywords_other_option" value="" placeholder="Other">
</form>

Here is DEMO.

Look more examples from official documentation.