Checks & Switches
Examples and usage guidelines for checkboxes, switches, and custom components for creating a wide variety of checkboxes.
Bootstrap Forms documentationCheckbox and radios
Default bootstrap examples.
You will receive notifications about actions to your email.
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck11" class="custom-control-input">
<label class="custom-control-label" for="customCheck11">Unchecked</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck12" class="custom-control-input" checked>
<label class="custom-control-label" for="customCheck12">Checked</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck13" class="custom-control-input indeterminate-checkbox" checked>
<label class="custom-control-label" for="customCheck13">Indeterminate</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customHelperCheck1" class="custom-control-input">
<label class="custom-control-label" for="customHelperCheck1">Notify about new notifications</label>
<div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck14" class="custom-control-input" disabled>
<label class="custom-control-label" for="customCheck14">Unchecked and disabled</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customCheck15" class="custom-control-input" checked disabled>
<label class="custom-control-label" for="customCheck15">Checked and disabled</label>
</div>
<!-- End Checkbox -->
</div>
You will receive notifications about actions to your email.
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio1">Unchecked</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" class="custom-control-input" checked name="customRadio">
<label class="custom-control-label" for="customRadio2">Checked</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio3">Unchecked</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio4" class="custom-control-input" name="customRadio">
<label class="custom-control-label" for="customRadio4">Notify about new notifications</label>
<div class="text-muted font-size-1">You will receive notifications about actions to your email.</div>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio5" class="custom-control-input" disabled name="customRadio">
<label class="custom-control-label" for="customRadio5">Unchecked and disabled</label>
</div>
<!-- End Checkbox -->
</div>
<div class="form-group">
<!-- Checkbox -->
<div class="custom-control custom-radio">
<input type="radio" id="customRadio6" class="custom-control-input" checked disabled>
<label class="custom-control-label" for="customRadio6">Checked and disabled</label>
</div>
<!-- End Checkbox -->
</div>
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck1" class="custom-control-input">
<label class="custom-control-label" for="customInlineCheck1">Unchecked</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck2" class="custom-control-input indeterminate-checkbox" checked>
<label class="custom-control-label" for="customInlineCheck2">Indeterminate</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customInlineCheck3" class="custom-control-input" checked>
<label class="custom-control-label" for="customInlineCheck3">Checked</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio1" class="custom-control-input" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio1">Unchecked</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio2" class="custom-control-input indeterminate-checkbox" checked name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio2">Checked</label>
</div>
</div>
<!-- End Form Check -->
<!-- Form Check -->
<div class="form-check form-check-inline">
<div class="custom-control custom-radio">
<input type="radio" id="customInlineRadio3" class="custom-control-input indeterminate-checkbox" name="customInlineRadio">
<label class="custom-control-label" for="customInlineRadio3">Unchecked</label>
</div>
</div>
<!-- End Form Check -->
Checkbox within a .form-control
<div class="form-row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="formControlCheckboxEg" id="formControlCheckboxEg1" checked>
<label class="custom-control-label" for="formControlCheckboxEg1">Checked</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="formControlCheckboxEg" id="formControlCheckboxEg2">
<label class="custom-control-label" for="formControlCheckboxEg2">Unchecked</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="formControlCheckboxEg" id="formControlCheckboxEg3" disabled>
<label class="custom-control-label" for="projectViewNewProjectTypeRadio3">Disabled</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
</div>
<!-- End Row -->
Change checkbox position to the opposite side with the .custom-radio-reverse modifier.
<div class="form-row">
<div class="col-sm mb-2 mb-sm-0">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio custom-radio-reverse">
<input type="radio" class="custom-control-input" name="projectViewNewProjectTypeRadio" id="projectViewNewProjectTypeRadio1">
<label class="custom-control-label media align-items-center" for="projectViewNewProjectTypeRadio1">
<i class="tio-agenda-view-outlined text-muted mr-2"></i>
<span class="media-body">
Unchecked
</span>
</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio custom-radio-reverse">
<input type="radio" class="custom-control-input" name="projectViewNewProjectTypeRadio" id="projectViewNewProjectTypeRadio2" checked>
<label class="custom-control-label media align-items-center" for="projectViewNewProjectTypeRadio2">
<i class="tio-table text-muted mr-2"></i>
<span class="media-body">
Checked
</span>
</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
<div class="col-sm mb-2 mb-sm-0">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio custom-radio-reverse">
<input type="radio" class="custom-control-input" name="projectViewNewProjectTypeRadio" id="projectViewNewProjectTypeRadio3" disabled>
<label class="custom-control-label media align-items-center" for="projectViewNewProjectTypeRadio3">
<i class="tio-align-to-center-outlined text-muted mr-2"></i>
<span class="media-body">
Disabled
</span>
</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
</div>
<!-- End Row -->
Input group break
Long contents don't fit in small screens? Use .input-group-{breakpoint}-down-break modifier classes to break horizontal alignment and keep the same style in vertical order. Reduce browser size to see it in action.
<!-- Input Group -->
<div class="input-group input-group-md-down-break">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadioEg" id="genderTypeRadioEg1">
<label class="custom-control-label" for="genderTypeRadioEg1">Male</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadioEg" id="genderTypeRadioEg2" checked>
<label class="custom-control-label" for="genderTypeRadioEg2">Female</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadioEg" id="genderTypeRadioEg3">
<label class="custom-control-label" for="genderTypeRadioEg3">Other</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
<!-- End Input Group -->
Vertical example:
<!-- Input Group -->
<div class="input-group input-group-down-break" style="max-width: 18rem;">
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadioVerEg" id="genderTypeRadioVerEg1" checked>
<label class="custom-control-label" for="genderTypeRadioVerEg1">Male</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadioVerEg" id="genderTypeRadioVerEg2">
<label class="custom-control-label" for="genderTypeRadioVerEg2">Female</label>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="form-control">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="genderTypeRadioVerEg" id="genderTypeRadioVerEg3">
<label class="custom-control-label" for="genderTypeRadioVerEg3">Other</label>
</div>
</div>
<!-- End Custom Radio -->
</div>
<!-- End Input Group -->
Checkbox bookmark
<!-- Checkbbox Bookmark -->
<div class="custom-control custom-checkbox-bookmark mb-2">
<input type="checkbox" id="checkboxBookmark1" class="custom-control-input custom-checkbox-bookmark-input">
<label class="custom-checkbox-bookmark-label" for="checkboxBookmark1">
<span class="custom-checkbox-bookmark-default">
<i class="tio-star-outlined"></i>
</span>
<span class="custom-checkbox-bookmark-active">
<i class="tio-star"></i>
</span>
<small class="text-dark ml-2">Star checkbox</small>
</label>
</div>
<!-- End Checkbbox Bookmark -->
<!-- Checkbbox Bookmark -->
<div class="custom-control custom-checkbox-bookmark">
<input type="checkbox" id="checkboxBookmark2" class="custom-control-input custom-checkbox-bookmark-input">
<label class="custom-checkbox-bookmark-label" for="checkboxBookmark2">
<span class="custom-checkbox-bookmark-default">
<i class="tio-bookmark-outlined"></i>
</span>
<span class="custom-checkbox-bookmark-active">
<i class="tio-bookmark"></i>
</span>
<small class="text-dark ml-2">Bookmark checkbox</small>
</label>
</div>
<!-- End Checkbbox Bookmark -->
Checkbox switch
Use button sizes for sizes and border radius utility classes for shapes.
<!-- Checkbox -->
<div class="custom-control custom-checkbox-switch mr-2">
<input type="checkbox" id="connectionsCheckbox7" class="custom-control-input custom-checkbox-switch-input" >
<label class="custom-checkbox-switch-label btn" for="connectionsCheckbox7">
<span class="custom-checkbox-switch-default">
<i class="tio-user-add mr-1"></i> Connect
</span>
<span class="custom-checkbox-switch-active">
<i class="tio-done mr-1"></i> Connected
</span>
</label>
</div>
<!-- End Checkbox -->
<!-- Checkbox -->
<div class="custom-control custom-checkbox-switch">
<input type="checkbox" id="connectionsCheckbox1" class="custom-control-input custom-checkbox-switch-input" checked>
<label class="custom-checkbox-switch-label btn-icon rounded-circle" for="connectionsCheckbox1">
<span class="custom-checkbox-switch-default">
<i class="tio-user-add"></i>
</span>
<span class="custom-checkbox-switch-active">
<i class="tio-done"></i>
</span>
</label>
</div>
<!-- End Checkbox -->
Checkbox card
Basic example:
Default
Dark
Light
<div class="row">
<!-- Custom Radio -->
<div class="col-4 text-center">
<div class="text-center">
<div class="custom-checkbox-card mb-2">
<input type="radio" class="custom-checkbox-card-input" name="layoutSkinsRadio" id="layoutSkinsRadio1" checked value="default">
<label class="custom-checkbox-card-label" for="layoutSkinsRadio1">
<img class="custom-checkbox-card-img" src="../assets/svg/layouts/layouts-sidebar-default.svg" alt="Image Description">
</label>
<span class="custom-checkbox-card-text">Default</span>
</div>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="col-4 text-center">
<div class="text-center">
<div class="custom-checkbox-card mb-2">
<input type="radio" class="custom-checkbox-card-input" name="layoutSkinsRadio" id="layoutSkinsRadio2" value="navbar-dark">
<label class="custom-checkbox-card-label" for="layoutSkinsRadio2">
<img class="custom-checkbox-card-img" src="../assets/svg/layouts/layouts-sidebar-dark.svg" alt="Image Description">
</label>
<span class="custom-checkbox-card-text">Dark</span>
</div>
</div>
</div>
<!-- End Custom Radio -->
<!-- Custom Radio -->
<div class="col-4 text-center">
<div class="text-center">
<div class="custom-checkbox-card mb-2">
<input type="radio" class="custom-checkbox-card-input" name="layoutSkinsRadio" id="layoutSkinsRadio3" value="navbar-light">
<label class="custom-checkbox-card-label" for="layoutSkinsRadio3">
<img class="custom-checkbox-card-img" src="../assets/svg/layouts/layouts-sidebar-light.svg" alt="Image Description">
</label>
<span class="custom-checkbox-card-text">Light</span>
</div>
</div>
</div>
<!-- End Custom Radio -->
</div>
<!-- End Row -->
Use .custom-checkbox-card-label-stretched next to a .custom-checkbox-card-label class to make the whole containing block clickable via a ::after pseudo element. In most cases, this means that a .custom-checkbox-card class with position: relative; that contains a link with the .custom-checkbox-card-label-stretched class is clickable.
Starter
$32 / mon
Or prepay annually
Save $10
- 100 GB storage
- 2 sources
- 100 integrations
Terms & conditions apply
Enterprise
$54 / mon
Or prepay annually
Save $12
- 200 GB storage
- 10 sources
- 300 integrations
Terms & conditions apply
<!-- Pricing -->
<div class="row">
<div class="col-sm-6 mb-3 mb-sm-0">
<!-- Card -->
<div class="js-custom-checkbox-card card custom-checkbox-card custom-checkbox-card-lg checked">
<!-- Header -->
<div class="card-header d-block text-center">
<!-- Checkbox -->
<input type="radio" id="checkboxCardPricingRadioEg2" name="checkboxCardPricingRadioEg" class="js-custom-checkbox-card-input custom-checkbox-card-input" checked>
<label class="custom-checkbox-card-label custom-checkbox-card-label-stretched" for="checkboxCardPricingRadioEg2"></label>
<!-- End Checkbox -->
<small class="card-subtitle">Starter</small>
<div class="mb-3">
<span class="card-title display-3">
$32 <small class="font-size-sm text-muted">/ mon</small>
</span>
</div>
<span>Or prepay annually</span>
<p class="card-text font-weight-bold text-primary">Save $10</p>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<ul class="list-checked list-checked-primary list-unstyled-py-2">
<li class="list-checked-item">100 GB storage</li>
<li class="list-checked-item">2 sources</li>
<li class="list-checked-item">100 integrations</li>
</ul>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-body-stretched">
<button type="button" class="btn btn-block btn-white custom-checkbox-card-btn">Select plan</button>
</div>
<div class="card-footer">
<p class="card-text small">
<i class="tio-help-outlined mr-1"></i> Terms & conditions apply
</p>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
</div>
<div class="col-sm-6">
<!-- Card -->
<div class="js-custom-checkbox-card card custom-checkbox-card custom-checkbox-card-lg">
<!-- Header -->
<div class="card-header d-block text-center">
<!-- Checkbox -->
<input type="radio" id="checkboxCardPricingRadioEg3" name="checkboxCardPricingRadioEg" class="js-custom-checkbox-card-input custom-checkbox-card-input">
<label class="custom-checkbox-card-label custom-checkbox-card-label-stretched" for="checkboxCardPricingRadioEg3"></label>
<!-- End Checkbox -->
<small class="card-subtitle">Enterprise</small>
<div class="mb-3">
<span class="card-title display-3">
$54 <small class="font-size-sm text-muted">/ mon</small>
</span>
</div>
<span>Or prepay annually</span>
<p class="card-text font-weight-bold text-primary">Save $12</p>
</div>
<!-- End Header -->
<!-- Body -->
<div class="card-body">
<ul class="list-checked list-checked-primary list-unstyled-py-2">
<li class="list-checked-item">200 GB storage</li>
<li class="list-checked-item">10 sources</li>
<li class="list-checked-item">300 integrations</li>
</ul>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-body-stretched">
<button type="button" class="btn btn-block btn-white custom-checkbox-card-btn">Select plan</button>
</div>
<div class="card-footer">
<p class="card-text small">
<i class="tio-help-outlined mr-1"></i> Terms & conditions apply
</p>
</div>
<!-- End Footer -->
</div>
<!-- End Card -->
</div>
</div>
<!-- End Pricing -->
<script>
$(document).on('ready', function () {
// checkbox card input .checked state
$('.js-custom-checkbox-card-input').change(function (e) {
$('.js-custom-checkbox-card-input').closest('.js-custom-checkbox-card').removeClass('checked')
$(e.target).closest('.js-custom-checkbox-card').addClass('checked')
})
});
</script>
Checkbox list
-
Brian Warner2hrchanged an issue from "In Progress" to Review
-
KKlara Hampton10hr
mentioned you in a comment
Nice work, love! You really nailed it. Keep it up!
-
Ruby Walter3dyjoined the Slack group HS Team
-
from Google17dyStart using forms to capture the information of prospects visiting your Google website
-
Sara Villar2mncompleted FD-7 task
<!-- List Group -->
<ul class="list-group list-group-flush">
<!-- Item -->
<li class="list-group-item custom-checkbox-list-wrapper">
<div class="d-flex align-items-start flex-grow-1">
<div class="d-flex align-items-center mr-3">
<div class="custom-control custom-checkbox custom-checkbox-list">
<input type="checkbox" class="custom-control-input" id="notificationCheck1" checked>
<label class="custom-control-label" for="notificationCheck1"></label>
<span class="custom-checkbox-list-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img3.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 mr-2">
<span class="card-title h5">Brian Warner</span>
<p class="card-text font-size-sm">changed an issue from "In Progress" to <span class="badge badge-success">Review</span></p>
</div>
<small class="text-muted text-cap">2hr</small>
</div>
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item custom-checkbox-list-wrapper">
<div class="d-flex align-items-start flex-grow-1">
<div class="d-flex align-items-center mr-3">
<div class="custom-control custom-checkbox custom-checkbox-list">
<input type="checkbox" class="custom-control-input" id="notificationCheck2" checked>
<label class="custom-control-label" for="notificationCheck2"></label>
<span class="custom-checkbox-list-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-soft-dark avatar-circle">
<span class="avatar-initials">K</span>
</div>
</div>
<div class="flex-grow-1 mr-2">
<span class="card-title h5">Klara Hampton</span>
<p class="card-text font-size-sm">mentioned you in a comment</p>
<blockquote class="blockquote blockquote-sm">
Nice work, love! You really nailed it. Keep it up!
</blockquote>
</div>
<small class="text-muted text-cap">10hr</small>
</div>
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item custom-checkbox-list-wrapper">
<div class="d-flex align-items-start flex-grow-1">
<div class="d-flex align-items-center mr-3">
<div class="custom-control custom-checkbox custom-checkbox-list">
<input type="checkbox" class="custom-control-input" id="notificationCheck4" checked>
<label class="custom-control-label" for="notificationCheck4"></label>
<span class="custom-checkbox-list-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img10.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 mr-2">
<span class="card-title h5">Ruby Walter</span>
<p class="card-text font-size-sm">joined the Slack group HS Team</p>
</div>
<small class="text-muted text-cap">3dy</small>
</div>
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item custom-checkbox-list-wrapper">
<div class="d-flex align-items-start flex-grow-1">
<div class="d-flex align-items-center mr-3">
<div class="custom-control custom-checkbox custom-checkbox-list">
<input type="checkbox" class="custom-control-input" id="notificationCheck3">
<label class="custom-control-label" for="notificationCheck3"></label>
<span class="custom-checkbox-list-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/svg/brands/google.svg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 mr-2">
<span class="card-title h5">from Google</span>
<p class="card-text font-size-sm">Start using forms to capture the information of prospects visiting your Google website</p>
</div>
<small class="text-muted text-cap">17dy</small>
</div>
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
<!-- Item -->
<li class="list-group-item custom-checkbox-list-wrapper">
<div class="d-flex align-items-start flex-grow-1">
<div class="d-flex align-items-center mr-3">
<div class="custom-control custom-checkbox custom-checkbox-list">
<input type="checkbox" class="custom-control-input" id="notificationCheck5">
<label class="custom-control-label" for="notificationCheck5"></label>
<span class="custom-checkbox-list-stretched-bg"></span>
</div>
<div class="avatar avatar-sm avatar-circle">
<img class="avatar-img" src="../assets/img/160x160/img7.jpg" alt="Image Description">
</div>
</div>
<div class="flex-grow-1 mr-2">
<span class="card-title h5">Sara Villar</span>
<p class="card-text font-size-sm">completed <i class="tio-folder-bookmarked text-primary"></i> FD-7 task</p>
</div>
<small class="text-muted text-cap">2mn</small>
</div>
<a class="stretched-link" href="#"></a>
</li>
<!-- End Item -->
</ul>
<!-- End List Group -->
Switches
Replace a standard checkbox input with a toggle switch.
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch1">
<input type="checkbox" class="toggle-switch-input" id="customSwitch1">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Unchecked</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch2">
<input type="checkbox" class="toggle-switch-input" id="customSwitch2" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Checked</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex mb-3" for="customSwitch3">
<input type="checkbox" class="toggle-switch-input" id="customSwitch3">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Notify about new notifications</span>
<small class="d-block text-muted">You will receive notifications about actions to your email</small>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch4">
<input type="checkbox" class="toggle-switch-input" id="customSwitch4" disabled>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Disabled</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitch5">
<input type="checkbox" class="toggle-switch-input" id="customSwitch5" checked disabled>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Checked & disabled</span>
</span>
</label>
<!-- End Checkbox Switch -->
Sizes
Use .toggle-switch-sm for a smaller size.
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="customSwitchDefaultSize">
<input type="checkbox" class="toggle-switch-input" id="customSwitchDefaultSize">
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Default size</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch toggle-switch-sm d-flex align-items-center mb-3" for="customSwitchSmallSize">
<input type="checkbox" class="toggle-switch-input" id="customSwitchSmallSize" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Small size</span>
</span>
</label>
<!-- End Checkbox Switch -->
Validation states
It provides valuable, actionable feedback to your users with HTML5 form validation.
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center mb-3" for="validSwitch">
<input type="checkbox" class="toggle-switch-input is-valid" id="validSwitch" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Valid toggle switch</span>
</span>
</label>
<!-- End Checkbox Switch -->
<!-- Checkbox Switch -->
<label class="toggle-switch d-flex align-items-center" for="invalidSwitch">
<input type="checkbox" class="toggle-switch-input is-invalid" id="invalidSwitch" checked>
<span class="toggle-switch-label">
<span class="toggle-switch-indicator"></span>
</span>
<span class="toggle-switch-content">
<span class="d-block">Invalid toggle switch</span>
</span>
</label>
<!-- End Checkbox Switch -->