Place Custom Checkbox Icon to right of label Bootstrap 4
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>
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.