Checks & Switches
Dokumentasi Bootstrap Checks & RadiosYou will receive notifications about actions to your email.
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck11" class="form-check-input">
<label class="form-check-label" for="formCheck11">Unchecked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck12" class="form-check-input" checked>
<label class="form-check-label" for="formCheck12">Checked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck13" class="form-check-input indeterminate-checkbox" checked>
<label class="form-check-label" for="formCheck13">Indeterminate</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formHelperCheck1" class="form-check-input">
<label class="form-check-label" for="formHelperCheck1">Notify about new notifications</label>
<div class="text-muted">You will receive notifications about actions to your email.</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck14" class="form-check-input" disabled>
<label class="form-check-label" for="formCheck14">Unchecked and disabled</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" id="formCheck15" class="form-check-input" checked disabled>
<label class="form-check-label" for="formCheck15">Checked and disabled</label>
</div>
<!-- End Checkbox -->
You will receive notifications about actions to your email.
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio1" class="form-check-input" name="formRadio">
<label class="form-check-label" for="formRadio1">Unchecked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio2" class="form-check-input" checked name="formRadio">
<label class="form-check-label" for="formRadio2">Checked</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio4" class="form-check-input" name="formRadio">
<label class="form-check-label" for="formRadio4">Notify about new notifications</label>
<div class="text-muted">You will receive notifications about actions to your email.</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio5" class="form-check-input" disabled name="formRadio">
<label class="form-check-label" for="formRadio5">Unchecked and disabled</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="radio" id="formRadio6" class="form-check-input" checked disabled>
<label class="form-check-label" for="formRadio6">Checked and disabled</label>
</div>
<!-- End Checkbox -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="formInlineCheck1" class="form-check-input">
<label class="form-check-label" for="formInlineCheck1">Unchecked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="formInlineCheck2" class="form-check-input indeterminate-checkbox" checked>
<label class="form-check-label" for="formInlineCheck2">Indeterminate</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="checkbox" id="formInlineCheck3" class="form-check-input" checked>
<label class="form-check-label" for="formInlineCheck3">Checked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="radio" id="formInlineRadio1" class="form-check-input" name="formInlineRadio">
<label class="form-check-label" for="formInlineRadio1">Unchecked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="radio" id="formInlineRadio2" class="form-check-input indeterminate-checkbox" checked name="formInlineRadio">
<label class="form-check-label" for="formInlineRadio2">Checked</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<input type="radio" id="formInlineRadio3" class="form-check-input indeterminate-checkbox" name="formInlineRadio">
<label class="form-check-label" for="formInlineRadio3">Unchecked</label>
</div>
<!-- End Form Check -->
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioEg1">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg1" checked>
<span class="form-check-label">Checked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioEg2">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg2">
<span class="form-check-label">Unchecked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioEg3">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioEg" id="formControlRadioEg3" disabled>
<span class="form-check-label">Disabled</span>
</span>
</label>
<!-- End Form Radio -->
</div>
</div>
<!-- End Row -->
Checkbox reverse
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg1">
<span class="form-check form-check-reverse">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg1" checked>
<span class="form-check-label">Checked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg2">
<span class="form-check form-check-reverse">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg2">
<span class="form-check-label">Unchecked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg3">
<span class="form-check form-check-reverse">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg3" disabled>
<span class="form-check-label">Disabled</span>
</span>
</label>
<!-- End Form Radio -->
</div>
</div>
<!-- End Row -->
Colorful checkbox
<div class="row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg1">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg1" checked>
<span class="form-check-label">Checked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg2">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg2">
<span class="form-check-label">Unchecked</span>
</span>
</label>
<!-- End Form Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Form Radio -->
<label class="form-control" for="formControlRadioReverseEg3">
<span class="form-check">
<input type="radio" class="form-check-input" name="formControlRadioReverseEg" id="formControlRadioReverseEg3" disabled>
<span class="form-check-label">Disabled</span>
</span>
</label>
<!-- End Form Radio -->
</div>
</div>
<!-- End Row -->
Input group break
<div class="input-group input-group-sm-vertical">
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg1_1">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg1_" id="editUserModalAccountTypeModalRadioEg1_1" checked>
<span class="form-check-label">Individual</span>
</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg1_2">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg1_" id="editUserModalAccountTypeModalRadioEg1_2">
<span class="form-check-label">Company</span>
</span>
</label>
<!-- End Radio Check -->
</div>
<div class="input-group input-group-vertical">
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg2_1">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg2_" id="editUserModalAccountTypeModalRadioEg2_1" checked>
<span class="form-check-label">Individual</span>
</span>
</label>
<!-- End Radio Check -->
<!-- Radio Check -->
<label class="form-control" for="editUserModalAccountTypeModalRadioEg2_2">
<span class="form-check">
<input type="radio" class="form-check-input" name="editUserModalAccountTypeModalRadioEg2_" id="editUserModalAccountTypeModalRadioEg2_2">
<span class="form-check-label">Company</span>
</span>
</label>
<!-- End Radio Check -->
</div>
Checkbox select
2hrBrian Warner
changed an issue from "In Progress" to Review
- K10hr
Klara Hampton
mentioned you in a comment
Nice work, love! You really nailed it. Keep it up!
3dyRuby Walter
joined the Slack group Nue Team
17dyfrom Google
Start using forms to capture the information of prospects visiting your Google website
2mnSara Villar
completed FD-7 task
<!-- List Group -->
<ul class="list-group list-group-flush navbar-card-list-group">
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck1" checked>
<label class="form-check-label" for="notificationCheck1"></label>
<span class="form-check-stretched-bg"></span>
</div>
<img class="avatar avatar-sm avatar-circle" src="https://cdn.btekno.id/templates/nue/img/160x160/img3.jpg" alt="">
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Brian Warner</h5>
<p class="text-body fs-5">changed an issue from "In Progress" to <span class="badge bg-success">Review</span></p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">2hr</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck2" checked>
<label class="form-check-label" for="notificationCheck2"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-soft-dark avatar-circle">
<span class="avatar-initials">K</span>
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Klara Hampton</h5>
<p class="text-body fs-5">mentioned you in a comment</p>
<blockquote class="blockquote blockquote-sm">
Nice work, love! You really nailed it. Keep it up!
</blockquote>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">10hr</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck3" checked>
<label class="form-check-label" for="notificationCheck3"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img10.jpg" alt="">
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Ruby Walter</h5>
<p class="text-body fs-5">joined the Slack group Nue Team</p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">3dy</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck4">
<label class="form-check-label" for="notificationCheck4"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/svg/brands/google-icon.svg" alt="">
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">from Google</h5>
<p class="text-body fs-5">Start using forms to capture the information of prospects visiting your Google website</p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">17dy</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item form-check-select">
<div class="row">
<div class="col-auto">
<div class="d-flex align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="notificationCheck5">
<label class="form-check-label" for="notificationCheck5"></label>
<span class="form-check-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="https://cdn.btekno.id/templates/nue/img/160x160/img7.jpg" alt="">
</div>
</div>
</div>
<!-- End Col -->
<div class="col ms-n2">
<h5 class="mb-1">Sara Villar</h5>
<p class="text-body fs-5">completed <i class="bi-journal-bookmark-fill text-primary"></i> FD-7 task</p>
</div>
<!-- End Col -->
<small class="col-auto text-muted text-cap">2mn</small>
<!-- End Col -->
</div>
<!-- End Row -->
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
Checkbox switch
<!-- Form Check -->
<div class="form-check form-check-switch">
<input class="form-check-input" type="checkbox" value="" id="connectionsCheckbox1">
<label class="form-check-label btn-sm" for="connectionsCheckbox1">
<span class="form-check-default">
<i class="bi-person-plus-fill"></i> Connect
</span>
<span class="form-check-active">
<i class="bi-check-lg me-2"></i> Connected
</span>
</label>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-switch">
<input class="form-check-input" type="checkbox" value="" id="starredCheckbox1" checked>
<label class="form-check-label btn-icon btn-sm rounded-circle" for="starredCheckbox1">
<span class="form-check-default" data-bs-toggle="tooltip" data-bs-placement="top" title="Pin">
<i class="bi-star"></i>
</span>
<span class="form-check-active" data-bs-toggle="tooltip" data-bs-placement="top" title="Pinned">
<i class="bi-star-fill"></i>
</span>
</label>
</div>
<!-- End Form Check -->
Checkbox dashed
<label class="form-check form-check-dashed" for="logoUploader">
<img id="logoImg" class="avatar avatar-xl avatar-4x3 avatar-centered h-100 mb-2" src="https://cdn.btekno.id/templates/nue/svg/illustrations/oc-browse.svg" alt="">
<span class="d-block">Browse your file here</span>
<input type="file" class="form-check-input" id="logoUploader">
</label>
Select stretched
Basic
Free
Forever free
- 1 user
- Front plan features
- 1 app
Terms & conditions apply
Starter
$32 / mon
Or prepay monthly
- 3 users
- Front plan features
- 3 apps
- Product support
Terms & conditions apply
Enterprise
$54 / mon
Or prepay annually
- Unlimited users
- Front plan features
- Unlimited apps
- Product support
Terms & conditions apply
<div class="row">
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-lg form-check form-check-select-stretched h-100 zi-1">
<div class="card-header text-center">
<!-- Form Check -->
<input type="radio" class="form-check-input" name="billingPricingRadio" id="billingPricingRadio1" value="basic">
<label class="form-check-label" for="billingPricingRadio1"></label>
<!-- End Form Check -->
<span class="card-subtitle">Basic</span>
<h2 class="card-title display-3 text-dark">Free</h2>
<p class="card-text">Forever free</p>
</div>
<div class="card-body d-flex justify-content-center">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">1 user</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">1 app</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer border-0 text-center">
<div class="d-grid mb-2">
<button type="button" class="form-check-select-stretched-btn btn btn-white">Select plan</button>
</div>
<p class="card-text small">
<i class="bi-question-circle me-1"></i> Terms & conditions apply
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-lg form-check form-check-select-stretched h-100 zi-1">
<div class="card-header text-center">
<!-- Form Check -->
<input type="radio" class="form-check-input" name="billingPricingRadio" id="billingPricingRadio2" checked value="starter">
<label class="form-check-label" for="billingPricingRadio2"></label>
<!-- End Form Check -->
<span class="card-subtitle">Starter</span>
<h2 class="card-title display-3 text-dark">
$<span id="pricingCount1"
data-nue-toggle-switch-item-options='{
"min": 22,
"max": 32
}'>32</span>
<span class="fs-6 text-muted">/ mon</span>
</h2>
<p class="card-text">Or prepay monthly</p>
</div>
<div class="card-body d-flex justify-content-center">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">3 users</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">3 apps</li>
<li class="list-checked-item">Product support</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer border-0 text-center">
<div class="d-grid mb-2">
<button type="button" class="form-check-select-stretched-btn btn btn-white">Select plan</button>
</div>
<p class="card-text small">
<i class="bi-question-circle me-1"></i> Terms & conditions apply
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-md mb-3">
<!-- Card -->
<div class="card card-lg form-check form-check-select-stretched h-100 zi-1">
<div class="card-header text-center">
<!-- Form Check -->
<input type="radio" class="form-check-input" name="billingPricingRadio" id="billingPricingRadio3" value="enterprise">
<label class="form-check-label" for="billingPricingRadio3"></label>
<!-- End Form Check -->
<span class="card-subtitle">Enterprise</span>
<h2 class="card-title display-3 text-dark">
$<span id="pricingCount2"
data-nue-toggle-switch-item-options='{
"min": 42,
"max": 54
}'>54</span>
<span class="fs-6 text-muted">/ mon</span>
</h2>
<p class="card-text">Or prepay annually</p>
</div>
<div class="card-body d-flex justify-content-center">
<!-- List Checked -->
<ul class="list-checked list-checked-primary mb-0">
<li class="list-checked-item">Unlimited users</li>
<li class="list-checked-item">Front plan features</li>
<li class="list-checked-item">Unlimited apps</li>
<li class="list-checked-item">Product support</li>
</ul>
<!-- End List Checked -->
</div>
<div class="card-footer border-0 text-center">
<div class="d-grid mb-2">
<button type="button" class="form-check-select-stretched-btn btn btn-white">Select plan</button>
</div>
<p class="card-text small">
<i class="bi-question-circle me-1"></i> Terms & conditions apply
</p>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Label Highlighter
Light
Dark
<div class="row gx-3">
<!-- Check -->
<div class="col-6">
<div class="form-check form-check-label-highlighter text-center">
<input type="radio" class="form-check-input" name="labelHighlighterRadio" id="labelHighlighterRadio1" checked value="default">
<label class="form-check-label mb-2" for="labelHighlighterRadio1">
<img class="form-check-img" src="https://cdn.btekno.id/templates/nue/img/900x562/img1.jpg" alt="">
</label>
<span class="form-check-text">Light</span>
</div>
</div>
<!-- End Check -->
<!-- Check -->
<div class="col-6">
<div class="form-check form-check-label-highlighter text-center">
<input type="radio" class="form-check-input" name="labelHighlighterRadio" id="labelHighlighterRadio2" value="dark">
<label class="form-check-label mb-2" for="labelHighlighterRadio2">
<img class="form-check-img" src="https://cdn.btekno.id/templates/nue/img/900x562/img6.jpg" alt="">
</label>
<span class="form-check-text">Dark</span>
</div>
</div>
<!-- End Check -->
</div>
<!-- End Row -->
Switches
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch1">
<label class="form-check-label" for="formSwitch1">Unchecked</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch2" checked>
<label class="form-check-label" for="formSwitch2">Checked</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch form-switch-between mb-4">
<label class="form-check-label">Off</label>
<input type="checkbox" class="form-check-input">
<label class="form-check-label">On</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch4" disabled>
<label class="form-check-label" for="formSwitch4">Disabled</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input" id="formSwitch5" checked disabled>
<label class="form-check-label" for="formSwitch5">Checked & disabled</label>
</div>
<!-- End Checkbox Switch -->
Validation states
<!-- Check -->
<div class="form-check mb-3">
<input type="checkbox" id="validCheck" class="form-check-input is-valid" checked>
<label class="form-check-valid" for="validCheck">Valid check</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check mb-3">
<input type="checkbox" id="invalidCheck" class="form-check-input is-invalid" checked>
<label class="form-check-invalid" for="invalidCheck">Invalid check</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check mb-3">
<input type="radio" id="validRadio" class="form-check-input is-valid" checked>
<label class="form-check-valid" for="validRadio">Valid radio</label>
</div>
<!-- End Check -->
<!-- Check -->
<div class="form-check mb-3">
<input type="radio" id="invalidRadio" class="form-check-input is-invalid" checked>
<label class="form-check-invalid" for="invalidRadio">Invalid radio</label>
</div>
<!-- End Check -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input is-valid" id="validSwitch" checked>
<label class="form-check-valid">Valid toggle switch</label>
</div>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<div class="form-check form-switch mb-4">
<input type="checkbox" class="form-check-input is-invalid" id="invalidSwitch" checked>
<label class="form-check-invalid">Invalid toggle switch</label>
</div>
<!-- End Checkbox Switch -->