Bootstrap Checkbox And Label On Same Line

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-

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

Solution 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

Solution 3:

Try using bootstrap "checkbox" or "checkbox-inline" class

<div class="checkbox">
    <label><inputtype="checkbox"value="">Option 1</label></div>

Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

Share

You may like these posts

• 
  Typeahead Bootstrap + Play Framework - Why Do I Need To Html Encode Single Quote Characters In Json Being Passed To Html?
• 
  How To Prevent Triggering Button Event When Press 'enter' Key And Hold?
• 
  Razor Syntax Error Serializing Asp.net Model To Json With Html.raw
• 
  How To Return Specific Http Status Code In A Plain Html Page