Checkbox Radio

<div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" value="" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">
      Custom checkbox
    </label>
  </div>

<div class="custom-control custom-checkbox custom-control-inline">
    <input class="custom-control-input" name="checkboxf" type="checkbox" value="" id="customCheckin1">
    <label class="custom-control-label" for="customCheckin1">
      Custom checkbox
    </label>
  </div>
  <div class="custom-control custom-checkbox form-check-inline">
    <input class="custom-control-input" name="checkboxf" type="checkbox" value="" id="customCheckin2">
    <label class="custom-control-label" for="customCheckin2">
      Custom checkbox
    </label>
  </div>

<div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" value="" id="customCheck2" disabled>
    <label class="custom-control-label" for="customCheck2">
      Custom Disabled checkbox
    </label>
  </div>
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" value="" id="customCheck2" disabled checked>
    <label class="custom-control-label" for="customCheck2">
      Custom Disabled checked checkbox
    </label>
  </div>

<div class="custom-control custom-checkbox">
    <input class="custom-control-input" type="checkbox" value="" id="customCheck3">
    <label class="custom-control-label" for="customCheck3">
      Custom Indeterminate checkbox
    </label>
  </div>
$('#customCheck3').prop('indeterminate', true)

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio1a" name="customRadioF" class="custom-control-input" checked>
    <label class="custom-control-label" for="customRadio1a">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="customRadio1b" name="customRadioF" class="custom-control-input">
    <label class="custom-control-label" for="customRadio1b">Toggle this custom radio</label>
  </div>

<div class="custom-control custom-control-inline custom-radio">
    <input type="radio" id="customRadio4a" name="customRadioF2" class="custom-control-input" checked>
    <label class="custom-control-label" for="customRadio4a">Toggle radio</label>
  </div>
  <div class="custom-control custom-control-inline custom-radio">
    <input type="radio" id="customRadio4b" name="customRadioF2" class="custom-control-input">
    <label class="custom-control-label" for="customRadio4b">Toggle this radio</label>
  </div>

<div class="custom-control custom-radio">
    <input type="radio" id="customRadio3" name="customRadioD" class="custom-control-input" disabled>
    <label class="custom-control-label" for="customRadio3">This disabled custom radio</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="customRadio4" name="customRadioD" class="custom-control-input" disabled checked>
    <label class="custom-control-label" for="customRadio4">This disabled custom radio</label>
  </div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">Default Radio button</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

<div class="custom-control custom-toggle">
    <input type="checkbox" class="custom-control-input" id="customSwitch" checked>
  <label class="custom-control-label" for="customSwitch">Testing</label>
</div>

<div class="custom-control custom-switch-sm">
    <input type="checkbox" class="custom-control-input" id="customSwitchSmall" checked>
  <label class="custom-control-label" for="customSwitchSmall">Testing</label>
</div>

<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitchDisabled" checked>
  <label class="custom-control-label" for="customSwitchDisabled">Testing</label>
</div>

  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">Default Radio button</label>
  </div>
  <div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" name="inlineCheckboxOptions" id="inlineCheck1" value="option1">
  <label class="form-check-label" for="inlineCheck1">Default Checkbox button</label>
</div>

<div class="form-group"><div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" value="" id="invalidCheck" required>
  <label class="custom-control-label" for="invalidCheck">
    Invalid checkbox
  </label>
</div></div>
</form>

    <div class="custom-control custom-checkbox"><input class="custom-control-input" type="checkbox" value="" id="invalidCheck" required>
          <label class="custom-control-label" for="invalidCheck">Invalid checkbox</label>
          <div class="invalid-feedback">You must check this before submitting.</div>
        </div>