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>