Place Custom Checkbox Icon to right of label Bootstrap 4

Question

I have tried everything but I can't place checkbox right to the label. I could move the checkbox to the right of label, if it is general type of checkbox. But I could not do the same with custom-checkbox type.

 <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck" name="example1"> <label class="custom-control-label" for="customCheck">Label</label> </div>

Answer 1

The custom checkbox is created with pseudo elements so their positioning needs to be adjusted relative to the label.

 .custom-control.custom-checkbox{padding-left: 0;} label.custom-control-label { position: relative; padding-right: 1.5rem; } label.custom-control-label::before, label.custom-control-label::after{ right: 0; left: auto; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customCheck" name="example1"> <label class="custom-control-label" for="customCheck">Label</label> </div>

Answer 2

The earlier @serg-chernata answer doesn't seem to work for me with custom-switch . Here's an example i got working.

CSS

div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
    right: -1.5rem;
    left: auto;
}
div.custom-control-right .custom-control-label::before {
    right: -2.35rem;
    left: auto;
}

HTML

<div class="custom-control custom-control-right custom-switch">
    <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
    <label class="custom-control-label" for="customSwitch2">Right switch element</label>
</div>

JsFiddle

https://jsfiddle.net/2cmbq9r0/

Screenshot

Edit: changed left:initial to left:auto to make it work with IE11.

Answer 3

If you are okay with...

1. Greater distance between the label and checkbox
2. Using the basic form-check class instead of custom-control

then one alternative is using a col-right class to move the checkbox to the far side of your form. In some cases, I have found that aligning labels and input elements on the far-left and far-right, respectively, provides a nice consistent look

<div class="row form-row">
  <div class="col">
    <label class="form-check-label" for="customCheck">Label</label>
  </div>
  <div class="col-right">
    <input type="checkbox" class="form-check-input" id="customCheck" name="example1">
  </div>
</div>