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>
