Bootstrap - label on the left side of checkbox

Question

I have a sample checkbox:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

I'd like to have a label on the left side. Do you know how can I do it? I tried with pull-right, but it does not work.

UPDATE: I think the problem is with rtl class which I use in the HTML tag.

Please take a look at http://jsfiddle.net/npjm1gfy/3/

Answer 1

You could just mix them up and apply a bit of margin

.form-check-input-reverse{
 margin-left: 10px;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-check">
<label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
  <input class="form-check-input-reverse" type="checkbox" value="" id="defaultCheck1">
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>

DEMO

---

Updated answer

With direction: rtl

New Demo

Answer 2

Do you want to have the checkbox label to the right? See below:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label pull-right" for="defaultCheck1">
    Default checkbox
  </label>
</div>

Or Do you want an additional label to the right of the checkbox? See below:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
  <div class="pull-right">
    <label class="form-check-label pull-right" for="defaultCheck1">
    Pulled right label
  </label>
  </div>
</div>