The checkbox is styled using the ::before pseudo-element of the <label>. This technique is employed to ensure consistent styling across different browsers and devices, as styling the actual <input type="checkbox> element directly can be challenging.
To achieve this styling, a custom class is added to the wrapper (custom-control-right in this case) and specific CSS rules are applied to override the default styles:
div.custom-control-right {
padding-right: 24px;
padding-left: 0;
margin-left: 16px;
margin-right: 0;
}
div.custom-control-right .custom-control-label::before,
div.custom-control-right .custom-control-label::after{
right: -1.5rem;
left: initial;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div style="margin:20px;">
<div class="custom-control custom-checkbox custom-control-inline custom-control-right">
<input type="checkbox" id="location" value="location" name="custom1" class="custom-control-input">
<label class="custom-control-label" for="location"> Option 1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline custom-control-right">
<input type="checkbox" id="location2" value="location2" name="custom2" class="custom-control-input">
<label class="custom-control-label" for="location2"> Option 2</label>
</div>
</div>
Note: Depending on the order in which the CSS is parsed, you may need to adjust the selector from div.custom-control-right to .custom-control-right. In this specific scenario, the selector needed to be overqualified due to the loading order of resources on SO.