Overview
Checkboxes use the .custom-control class as a
wrapper. They also both use <input type="checkbox"> and
have a <label> with a class of .custom-control-label.
Checkboxes add the .custom-checkbox class to their
.custom-control wrapper.
Custom checkboxes can also utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" checked class="custom-control-input" id="exampleCheckbox1">
<label class="custom-control-label" for="exampleCheckbox1">Checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="exampleCheckbox2">
<label class="custom-control-label" for="exampleCheckbox2">Checkbox</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" disabled checked class="custom-control-input" id="exampleCheckbox3">
<label class="custom-control-label" for="exampleCheckbox3">Disabled</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" disabled class="custom-control-input" id="exampleCheckbox4">
<label class="custom-control-label" for="exampleCheckbox4">Disabled</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="exampleCheckbox5">
<label class="custom-control-label" for="exampleCheckbox5">Indeterminate State</label>
</div>
</div>Inline
<div class="custom-control custom-checkbox custom-control-inline mr-3">
<input type="checkbox" checked class="custom-control-input" id="exampleCheckboxInline1">
<label class="custom-control-label" for="exampleCheckboxInline1">Checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline mr-3">
<input type="checkbox" class="custom-control-input" id="exampleCheckboxInline2">
<label class="custom-control-label" for="exampleCheckboxInline2">Checkbox</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline mr-3">
<input type="checkbox" class="custom-control-input" id="exampleCheckboxInline3">
<label class="custom-control-label" for="exampleCheckboxInline3">Checkbox</label>
</div>