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

Question

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

 <div class="col-xs-4 col-sm-3 col-md-2 col-md-offset-2 everything-checkbox"> 

<div class="checkbox">
    <label>
        <input type="checkbox" class="checkbox style-2 " checked="checked">
        <span>Text goes here</span>
    </label>
</div>

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.

Answer 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