css - Bootstrap alignment and spacing of vertical checkboxes with associated horizontal text fields -

What is the most elegant (i.e. non-hockey) way to properly align a group of checkboxes Are there one or more related text inputs? Whatever I have tried, I end up with (i) uneven checkboxes, or (ii) misspelled checkboxes, or (iii) misspelled labels, or (iv) misspelled text boxes.

:

What is your favorite food? (A) Apple (B) Banana (C) Carrot (D) Other: _______

Definitely very common, I wonder if anyone can find a way to do this with the bootstrap standard class Has been done before, I begin compulsion to code my own classes.

Here I have the code:

  & lt; Div class = "form-group" & gt; & Lt; Label class = "col-sm-2-control-label" & gt; Favorite food & lt; / Label & gt; & Lt; Div class = "col-sm-10" & gt; & Lt; Div class = "checkbox" & gt; & Lt; Label & gt; & Lt; Fieldet class = "form-inline" & gt; & Lt; Input type = "checkbox" /> Apple & lt; / Fieldset & gt; & Lt; / Labels & gt; & Lt; / Div & gt; & Lt; Div class = "checkbox" & gt; & Lt; Label & gt; & Lt; Fieldet class = "form-inline" & gt; & Lt; Input type = "checkbox" /> Banana & lt; / Fieldset & gt; & Lt; / Labels & gt; & Lt; / Div & gt; & Lt; Div class = "checkbox" & gt; & Lt; Label & gt; & Lt; Fieldet class = "form-inline" & gt; & Lt; Input type = "checkbox" /> Other & lt; Input type = "email" placeholder = "nobody@somewhere.com" class = "form-control" /> & Lt; / Fieldset & gt; & Lt; / Labels & gt; & Lt; / Div & gt; & Lt; Div class = "checkbox" & gt; & Lt; Label & gt; & Lt; Fieldet class = "form-inline" & gt; & Lt; Input type = "checkbox" /> The result of one of these color groups: & lt; A href = "" & gt; Red, Green, Blue & lt; / A & gt; & Lt; / Fieldset & gt; & Lt; / Labels & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Screenshot showing output in Chrome:

The fourth checkbox is very far from the third, while text and 'input type = text' on the third row are very few.

Yes, there is a simple bootstrap method, just change the checkbox code to:

  & lt; Div class = "checkbox" & gt; & Lt; Div class = "form-inline" & gt; & Lt; Label & gt; & Lt; Input type = "checkbox" /> Other & lt; / Labels & gt; & Lt; Input type = "email" placeholder = "nobody@somewhere.com" class = "form-control" /> & Lt; / Div & gt; & Lt; / Div & gt;