Checkbox Styles
To create custom control, wrapped with
<div> each
checkbox
<input> &
<label> using
.custom-control,
.custom-checkbox classes.
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.
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.
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>
