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

<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.


solution

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