How can I move a label to the left of a checkbox in Bootstrap 3?
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>
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.
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