bootstrap checkbox and label on same line

Question

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

Answer 1

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;
}

Answer 2

Use Bootstraps's radio-inline class:

See updated fiddle: https://jsfiddle.net/xs04fqgo/1/

Wrap the content and radio input within a label with class radio-inline, then you can make it on the same line using Bootstrap