<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">این چک‌باکس را امتحان کنید - پیشفرض</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">این چک‌باکس را امتحان کنید -فرعی</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">این چک‌باکس را امتحان کنید - موفقیت</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">این چک‌باکس را امتحان کنید - خطر</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">این چک‌باکس را امتحان کنید - هشدار</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">این چک‌باکس را امتحان کنید - اطلاعات</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">این چک‌باکس را امتحان کنید -تیره</label>
    </div>
</div>

<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">این دکمه‌ رادیو را امتحان کنید - پیشفرض</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">این دکمه‌ رادیو را امتحان کنید -فرعی</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">این دکمه‌ رادیو را امتحان کنید - موفقیت</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">این دکمه‌ رادیو را امتحان کنید - خطر</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">این دکمه‌ رادیو را امتحان کنید -
            هشدار</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">این دکمه‌ رادیو را امتحان کنید - اطلاعات</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">این دکمه‌ رادیو را امتحان کنید -Dark</label>
    </div>
</div>

<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">این دکمه‌ سوییچ را امتحان کنید - پیشفرض</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">این دکمه‌ سوییچ را امتحان کنید -فرعی</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">این دکمه‌ سوییچ را امتحان کنید - موفقیت</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">این دکمه‌ سوییچ را امتحان کنید - خطر</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">این دکمه‌ سوییچ را امتحان کنید - هشدار</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">این دکمه‌ سوییچ را امتحان کنید - اطلاعات</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">این دکمه‌ سوییچ را امتحان کنید -تیره</label>
    </div>
</div>

<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">این چک‌باکس را امتحان کنید</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">این چک‌باکس را امتحان کنید</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">این دکمه‌ رادیو را امتحان کنید</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">این دکمه‌ رادیو را امتحان کنید</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">دکمه سوییچ غیرفعال</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">دکمه سوییچ غیرفعال</label>
</div>

<!-- Checkbox -->
<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
    <label class="custom-control-label" for="customCheckDisabled">این چک‌باکس را امتحان کنید</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">این دکمه‌ رادیو را امتحان کنید</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">دکمه سوییچ غیرفعال</label>
</div>

<select class="custom-select custom-select-lg">
  <option selected>این انتخابگر را امتحان کنید</option>
  <option value="1">یک</option>
  <option value="2">دو</option>
  <option value="3">سه</option>
</select>

<select class="custom-select mb-3">
  <option selected>این انتخابگر را امتحان کنید</option>
  <option value="1">یک</option>
  <option value="2">دو</option>
  <option value="3">سه</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>این انتخابگر را امتحان کنید</option>
  <option value="1">یک</option>
  <option value="2">دو</option>
  <option value="3">سه</option>
</select>

<div class="form-group">
    <label for="customRange1">پیشفرض</label>
    <input type="range" class="custom-range" id="customRange1">
</div>
<div class="form-group">
    <label for="customRange6">فرعی</label>
    <input type="range" value="20" class="custom-range custom-range-secondary" id="customRange6">
</div>
<div class="form-group">
    <label for="customRange7">موفقیت</label>
    <input type="range" value="70" class="custom-range custom-range-success" id="customRange7">
</div>
<div class="form-group">
    <label for="customRange9">خطر</label>
    <input type="range" value="30" class="custom-range custom-range-danger" id="customRange9">
</div>
<div class="form-group">
    <label for="customRange2">هشدار</label>
    <input type="range" value="50" class="custom-range custom-range-warning" id="customRange2">
</div>
<div class="form-group">
    <label for="customRange8">اطلاعات</label>
    <input type="range" class="custom-range custom-range-info" id="customRange8">
</div>
<div class="form-group">
    <label for="customRange3">تیره</label>
    <input type="range" value="10" class="custom-range custom-range-dark" id="customRange3">
</div>

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">انتخاب فایل </label>
</div>