Align label to the left of Bootstrap Toggle - html

Question

I'm using bootstrap toggle to create switches like so:
<form>
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
Toggle Text Right
</label>
</div>
<div class="checkbox">
<label>
Toggle Text Left
<input type="checkbox" data-toggle="toggle" />
</label>
</div>
</form>
Is there a way to move the label to the left of the switch? I tried by putting the text before the input, but it doesn't fit well.
http://jsfiddle.net/sjxd1vpt/2/

Answer 1

Or if you do not specifically need the label tag you could use a span.
<form>
<div class="checkbox">
<input type="checkbox" data-toggle="toggle" checked="checked" />
<span>
Toggle Text Right
</span>
</div>
<div class="checkbox">
<span>
Toggle Text Left
</span>
<input type="checkbox" data-toggle="toggle" />
</div>

Answer 2

It appears the bootstrap-toggle css has a margin-left: -20px;
Simply add a custom class to the desired left label like so.
.left .toggle {
margin-left: 5px;
}
This will maintain the structure Bootstrap-Toggle expects in case they have styling tied in such as:
label input {
// some input targeted styling
}
http://jsfiddle.net/sjxd1vpt/5/

Answer 3

You should use bootstrap container-fluid wrappers to achieve the effect.
<form>
<div class="checkbox container-fluid" >
<label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
Toggle Text Right
</label>
</div>
<div class="checkbox container">
<label>
Toggle Text Left
</label>
<input type="checkbox" data-toggle="toggle" />
</div>

Answer 4

Your label tag should be closed before the input tag.
<form>
<div class="checkbox">
<label> Toggle Text Right </label>
<input type="checkbox" data-toggle="toggle" checked="checked" />
</div>
<div class="checkbox">
<label> Toggle Text Left </label>
<input type="checkbox" data-toggle="toggle" />
</div>
</form>
This should prevent the button toggle from overlapping on the text.
Here : http://jsfiddle.net/sjxd1vpt/4/