bootstrap checkbox and label on same line

css, html, twitter-bootstrap

Solution

You need a little more work in the css... Just created a new fiddle for you. Here it is.

li > input {
  display:inline-block;
  width:20px;
}
label { margin-bottom: 25px;
  display:inline-block;
  width:235px;
}

Problem

I can't get my checkboxes and labels on the same line. The proper bootstrap way is to wrap the checkbox in the label tag like this- ``` <li> <label><input type="radio">Joe made the sugar cookies; Susan decorated them.</label> </li> ``` But I'm using a CMS and it does not create checkboxes and labels that way, instead they are generated like this- ``` <li> <input type="radio"> <label>She did her best to help him.</label> </li> ``` The problem with this method is the checkboxes are on a different line to the label. I can set the label to display: inline and this works, but it removes all margins from my form and does not look very nice. Can anyone help me to find a solution? Here is a js fiddle

Original source