How to get checkbox label to be on the left of checkbox

Question

I have the following code:

   <div class=checkbox>
       <label><input type="checkbox" id="foo">My Label</label>
   </div>

   <div class=checkbox>
       <label><input type="checkbox" id="bar">Another Longer</label>
   </div>

   <div class=checkbox>
       <label><input type="checkbox" id="baz">Less than lng</label>
   </div>

this will render in bootstrap 3 with the label on the right hand side. which is fine normally, but I need it to be on the right hand side with the checkbox on the left.

So it looks like below, the labels should be right justified also.

      My Label []
Another longer []
 Less than lng []

Answer 1

If you can put your checkbox divs in a container, you don't have to worry about setting a width:

.container {
  display: inline-block;
  white-space: nowrap;
}

.checkbox {
  border: 1px solid transparent;
  text-align: right;
}

.checkbox input {
  float: right;
}

The border is needed for IE and Chrome. (Note that I made it transparent.) Stumbled across that by accident and will try to figure out why it's needed.

white-space: nowrap is needed for IE only.

Working Fiddle

---

Update

We need to override some of Bootstrap's defaults.

container is a Bootstrap class, so I've changed to cbcontainer.

Bootstrap makes the inputs position: absolute, so I've changed to position: relative !important.

Also, a margin is now needed for the input.

Finally, the border is no longer needed for IE and Chrome, and white-space is no longer needed for IE.

Updated CSS:

.cbcontainer {
  display: inline-block;
}

.checkbox {
  text-align: right;
}

.checkbox input {
  float: right;
  position: relative !important;
  margin: 5px !important;
}

New Fiddle

Answer 2

label{float:left}

 <div class=checkbox>
       <input type="checkbox" id="foo"><label>My Label</label>
   </div>

   <div class=checkbox>
       <input type="checkbox" id="bar"><label>Another Longer</label>
   </div>

   <div class=checkbox>
       <input type="checkbox" id="baz"><label>Less than lng</label>
   </div>

for perfect alignment, even if many designers won't like it, I would do this

<table><tr>
       <td><label>My Label</label></td>
         <td><input type="checkbox" id="foo"></td>
</tr><tr>
       <td><label>Another Longer</label></td>
         <td><input type="checkbox" id="bar"></td>
</tr><tr>
       <td><label>Less than lng</label></td>
         <td><input type="checkbox" id="baz"></td>
</tr></table>

Answer 3

Just try set float to left, for input inside .checkbox.

For smooth alignement, You will set width of .checkbox and label.

To align text of label, to right You must set text-align to right.
Additional You must set margin-left for input for space between label text and checkbox input.

JSFiddle

CSS:

.checkbox, .checkbox label {
    width: 200px;
}

.checkbox label {
    text-align: right;
    float: left;
}
.checkbox input {
    margin-left: 16px;
    float: right;
}