I'm working with a bootstrap 4 table that includes custom checkboxes that I want to align to the right.
If you need an example, feel free to check out this demo
Here's how I've created the custom checkboxes:
<label class="custom-control custom-checkbox">
<input type="checkbox" id="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
</label>
I've experimented with adding CSS like this:
.custom-control {
padding: 0 !important;
margin: 0 !important;
width: 0px !important;
}
.custom-control-label::before {
left: 0;
padding-right: 0;
margin-right: 0;
}
.custom-control-label::after {
left: 0;
padding-right: 0;
margin-right: 0;
}
.custom-control .custom-checkbox {
padding-right: 0;
margin-right: 0;
}
I've also tried using the .right and .pull-right classes on the checkboxes without success.
After some research, I discovered a solution involving the .pull-right class which worked for me.
Check out how to Align CheckBox to the right using Bootstrap