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

htmlcsstwitter-bootstraptwitter-bootstrap-3


Solution 1:[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

Solution 2:[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:[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:[4]

Using form-check-prepend in parent div

<form>
    <div>
      <div class="form-check-prepend">
        <label class="form-input-label" for="checkbox1">
          This is the label for the checkbox
        </label>
        <input
          type="checkbox1"
          class="form-check-input pull-right"
          id="checkbox1"
        />
      </div>
    </div>
  </form>

I'm currently using this on my website. I have not tested it across different devices and/or browsers. Comments welcome...

Solution 5:[5]

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>

Solution 6:[6]

There are 2 things to correct to have Bootstrap 3 checkbox to the right of label text:

  • margin-left: -20px for checkbox
  • padding-left: 20px for label

Checkbox's size is 12.8px.

So our new values should be:

  • for checkbox: margin-left: 7.2px
  • for label: padding-right: 20px

Here is an example:

.checkbox.checkbox-left-label label,
.checkbox-inline.checkbox-left-label {
  padding-left: unset;
  padding-right: 20px;
}

.checkbox.checkbox-left-label input[type=checkbox],
.checkbox-inline.checkbox-left-label input[type=checkbox] {
  margin-left: 7.2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h5>Checkboxes with labels on the left side:</h5>
  <p>
    <div class="checkbox checkbox-left-label">
      <label>Option 1<input type="checkbox" value=""></label>
    </div>
    <div class="checkbox checkbox-left-label">
      <label>Option 2<input type="checkbox" value=""></label>
    </div>
    <div class="checkbox checkbox-left-label disabled">
      <label>Option 3<input type="checkbox" value="" disabled></label>
    </div>
  </p>
</div>
<div class="container">
  <h5>Inline checkboxes with labels on the left side:</h5>
  <p>
    <label class="checkbox-inline checkbox-left-label">Option 1<input type="checkbox" value=""></label>
    <label class="checkbox-inline checkbox-left-label">Option 2<input type="checkbox" value=""></label>
    <label class="checkbox-inline checkbox-left-label disabled">Option 3<input type="checkbox" value="" disabled></label>
  </p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 mp31415
Solution 4 vaconingham
Solution 5 ChrisF
Solution 6 Sergey Nudnov

Related Questions