How can I move a label to the left of a checkbox in Bootstrap 3?

How can I move a label to the left of a checkbox in Bootstrap 3?

Is there anyway to get the text of a checkbox to be on the left side of the checkbox? I have tried and tried but cant get it working.
I’m using

I have tried putting the span on top and that also doesn’t work, Then if I make it a blank checkbox and just put text in front then they don’t line up.
any help would be really appreciated.

Solutions/Answers:

Solution 1:

Bootstrap styling will float the checkbox elements to the left because of this styling:

.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}

To solve this, you could simply add pull-right to the input element’s class:

<input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>

It’s also worth noting that a label element should have a for attribute matching the input element’s id attribute, like this:

<div class="checkbox">
    <label for="checkbox1">
        <span>Text goes here</span>
    </label>
    <input type="checkbox" id="checkbox1" class="checkbox style-2 pull-right" checked="checked"/>
</div>

UPDATED EXAMPLE HERE

Related:  Change hover color on nav-tabs

Solution 2:

This should do it! JSFiddle

<div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox"> 
<div class="checkbox">
<label>
<span>Text goes here</span>
<input type="checkbox" class="checkbox style-2 " checked="checked">
</label>
</div>   

Solution 3:

How about this (note left-checkbox class):

      <div class="form-group">

        <div class="col-xs-4">
          <div class="checkbox left-checkbox">
            <label>
              Text goes here
            </label>
          </div>
        </div>

        <div class="col-xs-8">
          <div class="checkbox left-checkbox">
            <input type="checkbox">
          </div>
        </div>

      </div>

with css

.left-checkbox label {
    text-align: right;
    float: right;
    font-weight: bold;    
}

.left-checkbox input[type=checkbox] {
    margin-left: 0;
}

Looks fine to me.

Solution 4:

I am always looking for simple solutions first.
A KISS solution is:

<span style="white-space: nowrap;">Do Not Reverse Import 
    <label>
        <input 
            type="checkbox" 
            name="DoNotReverseImport"    
            value="DoNotReverseImport"   
            OnChange = "OffYouGo('DoNotReverseImport');"   
            title = 'Check if old entries appear first in your import'         
        >
    </label>
</span>

References