Checkbox Styles
To create custom control, wrapped with <div> each checkbox <input> & <label> using .custom-control, .custom-checkbox classes.
Default
Checked
Disabled
Check Disabled
Size
For large or small size of .custom-checkbox, use .custom-control-{lg|sm} with .custom-control class.
Code Example
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Option Label</label>
</div>
<div class="custom-control custom-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">Option Label</label>
</div>
Radio Style
To create custom control, wrapped with <div> each radio <input> & <label> using .custom-control, .custom-radio classes.
Default
Checked
Disabled
Check Disabled
Size
For large or small size of .custom-radio, use .custom-control-{lg|sm} with .custom-control class.
Code Example
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Radio</label>
</div>
<div class="custom-control custom-control-lg custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Radio</label>
</div>
Switch Style
The switch markup of a .custom-control checkbox but uses the .custom-switch class to render a toggle switch.
Default
Checked
Disabled
Check Disabled
Size
For large or small size of .custom-switch, use .custom-control-{lg|sm} with .custom-control class.
Code Example
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Switch</label>
</div>
<div class="custom-control custom-control-lg custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Switch</label>
</div>
