Checkboxes
<div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck" checked> <label class="custom-control-label" for="customCheck">Check this custom checkbox - Default</label> </div></div><div class="form-group"> <div class="custom-control custom-checkbox custom-checkbox-secondary"> <input type="checkbox" class="custom-control-input" id="customCheck1" checked> <label class="custom-control-label" for="customCheck1">Check this custom checkbox - Secondary</label> </div></div><div class="form-group"> <div class="custom-control custom-checkbox custom-checkbox-success"> <input type="checkbox" class="custom-control-input" id="customCheck2" checked> <label class="custom-control-label" for="customCheck2">Check this custom checkbox - Success</label> </div></div><div class="form-group"> <div class="custom-control custom-checkbox custom-checkbox-danger"> <input type="checkbox" class="custom-control-input" id="customCheck3" checked> <label class="custom-control-label" for="customCheck3">Check this custom checkbox - Danger</label> </div></div><div class="form-group"> <div class="custom-control custom-checkbox custom-checkbox-warning"> <input type="checkbox" class="custom-control-input" id="customCheck4" checked> <label class="custom-control-label" for="customCheck4">Check this custom checkbox - Warning</label> </div></div><div class="form-group"> <div class="custom-control custom-checkbox custom-checkbox-info"> <input type="checkbox" class="custom-control-input" id="customCheck5" checked> <label class="custom-control-label" for="customCheck5">Check this custom checkbox - Info</label> </div></div><div class="form-group"> <div class="custom-control custom-checkbox custom-checkbox-dark"> <input type="checkbox" class="custom-control-input" id="customCheck6" checked> <label class="custom-control-label" for="customCheck6">Check this custom checkbox - Dark</label> </div></div>
Radio
<div class="form-group"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio" name="customRadio" class="custom-control-input" checked> <label class="custom-control-label" for="customRadio">Toggle this custom radio - Default</label> </div></div><div class="form-group"> <div class="custom-control custom-radio custom-checkbox-secondary"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">Toggle this custom radio - Secondary</label> </div></div><div class="form-group"> <div class="custom-control custom-radio custom-checkbox-success"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Toggle this custom radio - Success</label> </div></div><div class="form-group"> <div class="custom-control custom-radio custom-checkbox-danger"> <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio3">Toggle this custom radio - Danger</label> </div></div><div class="form-group"> <div class="custom-control custom-radio custom-checkbox-warning"> <input type="radio" id="customRadio4" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio4">Toggle this custom radio - Warning</label> </div></div><div class="form-group"> <div class="custom-control custom-radio custom-checkbox-info"> <input type="radio" id="customRadio5" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio5">Toggle this custom radio - Info</label> </div></div><div class="form-group"> <div class="custom-control custom-radio custom-checkbox-dark"> <input type="radio" id="customRadio6" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio6">Toggle this custom radio -Dark</label> </div></div>
Switches
<div class="form-group"> <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" id="customSwitch1" checked> <label class="custom-control-label" for="customSwitch1">Toggle this switch element - Default</label> </div></div><div class="form-group"> <div class="custom-control custom-switch custom-checkbox-secondary"> <input type="checkbox" class="custom-control-input" id="customSwitch2" checked> <label class="custom-control-label" for="customSwitch2">Toggle this switch element - Secondary</label> </div></div><div class="form-group"> <div class="custom-control custom-switch custom-checkbox-success"> <input type="checkbox" class="custom-control-input" id="customSwitch3" checked> <label class="custom-control-label" for="customSwitch3">Toggle this switch element - Success</label> </div></div><div class="form-group"> <div class="custom-control custom-switch custom-checkbox-danger"> <input type="checkbox" class="custom-control-input" id="customSwitch4" checked> <label class="custom-control-label" for="customSwitch4">Toggle this switch element - Danger</label> </div></div><div class="form-group"> <div class="custom-control custom-switch custom-checkbox-warning"> <input type="checkbox" class="custom-control-input" id="customSwitch5" checked> <label class="custom-control-label" for="customSwitch5">Toggle this switch element - Warning</label> </div></div><div class="form-group"> <div class="custom-control custom-switch custom-checkbox-info"> <input type="checkbox" class="custom-control-input" id="customSwitch6" checked> <label class="custom-control-label" for="customSwitch6">Toggle this switch element - Info</label> </div></div><div class="form-group"> <div class="custom-control custom-switch custom-checkbox-dark"> <input type="checkbox" class="custom-control-input" id="customSwitch7" checked> <label class="custom-control-label" for="customSwitch7">Toggle this switch element - Dark</label> </div></div>
Checkbox / Radio / Switches Inline


<div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" id="customCheckBoxInline1" name="customCheckboxInline1" class="custom-control-input"> <label class="custom-control-label" for="customCheckBoxInline1">Check this custom checkbox</label></div><div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" id="customCheckBoxInline2" name="customCheckboxInline2" class="custom-control-input"> <label class="custom-control-label" for="customCheckBoxInline2">Check this custom checkbox</label></div><div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label></div><div class="custom-control custom-radio custom-control-inline"> <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input"> <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label></div><div class="custom-control custom-switch custom-control-inline"> <input type="checkbox" class="custom-control-input" id="customSwitchInline1"> <label class="custom-control-label" for="customSwitchInline1">Disabled switch element</label></div><div class="custom-control custom-switch custom-control-inline"> <input type="checkbox" class="custom-control-input" id="customSwitchInline2"> <label class="custom-control-label" for="customSwitchInline2">Disabled switch element</label></div>
Checkbox / Radio / Switches Disabled
<!-- Checkbox --><div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled> <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label></div><!-- Radio --><div class="custom-control custom-radio"> <input type="radio" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled> <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label></div><!-- Switch --><div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" disabled id="customSwitchDisabled"> <label class="custom-control-label" for="customSwitchDisabled">Disabled switch element</label></div>
Select menu
<select class="custom-select custom-select-lg"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select><select class="custom-select mb-3"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select><select class="custom-select custom-select-sm"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
Range
<div class="form-group"> <label for="customRange1">Default</label> <input type="range" class="custom-range" id="customRange1"></div><div class="form-group"> <label for="customRange6">Secondary</label> <input type="range" value="20" class="custom-range custom-range-secondary" id="customRange6"></div><div class="form-group"> <label for="customRange7">Success</label> <input type="range" value="70" class="custom-range custom-range-success" id="customRange7"></div><div class="form-group"> <label for="customRange9">Danger</label> <input type="range" value="30" class="custom-range custom-range-danger" id="customRange9"></div><div class="form-group"> <label for="customRange2">Warning</label> <input type="range" value="50" class="custom-range custom-range-warning" id="customRange2"></div><div class="form-group"> <label for="customRange8">Info</label> <input type="range" class="custom-range custom-range-info" id="customRange8"></div><div class="form-group"> <label for="customRange3">Dark</label> <input type="range" value="10" class="custom-range custom-range-dark" id="customRange3"></div>
File browser
<div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label></div>