Checkboxes
Checkboxes and switches for multiple choices: select-all groups, mixed states, card options, permission matrices, filter facets and to-do lists.
1Basic checkboxes
Independent options; any number can be checked.
<fieldset>
<legend class="fs-6 fw-semibold">Send me</legend>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-591" checked>
<label class="form-check-label" for="cb-591">Order confirmations</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-592" checked>
<label class="form-check-label" for="cb-592">Shipping updates</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-593">
<label class="form-check-label" for="cb-593">Offers and discounts</label>
</div>
</fieldset>2Switches
Switches suit settings that take effect immediately.
Security
<h3 class="h6"><i class="bi bi-shield-lock-fill" aria-hidden="true"></i> Security</h3>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="cb-switch-594" checked>
<label class="form-check-label" for="cb-switch-594">Two-factor authentication</label>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="cb-switch-595">
<label class="form-check-label" for="cb-switch-595">Login alerts by email</label>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" role="switch" id="cb-switch-596" checked>
<label class="form-check-label" for="cb-switch-596">Remember trusted devices</label>
</div>3Mixed state
aria-checked="mixed" with a dash style shows that only some children are selected.
<div class="form-check">
<input class="form-check-input tl-mixed" type="checkbox" id="cb-mixed-597" aria-checked="mixed">
<label class="form-check-label fw-semibold" for="cb-mixed-597">All regions (2 of 4)</label>
</div>
<div class="ms-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-598" checked>
<label class="form-check-label" for="cb-598">Europe</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-599" checked>
<label class="form-check-label" for="cb-599">Americas</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-600">
<label class="form-check-label" for="cb-600">Asia Pacific</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-601">
<label class="form-check-label" for="cb-601">Africa</label>
</div>
</div>4Select all
data-demo-select-all checks or unchecks every checkbox with the given name.
<div class="border rounded-3 p-3">
<div class="form-check border-bottom pb-2 mb-2">
<input class="form-check-input" type="checkbox" id="cb-all-603" data-demo-select-all="notify-602">
<label class="form-check-label fw-semibold" for="cb-all-603">Select all notifications</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="notify-602" id="cb-item-604">
<label class="form-check-label" for="cb-item-604">Comments</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="notify-602" id="cb-item-605">
<label class="form-check-label" for="cb-item-605">Mentions</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="notify-602" id="cb-item-606">
<label class="form-check-label" for="cb-item-606">New followers</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="notify-602" id="cb-item-607">
<label class="form-check-label" for="cb-item-607">Weekly report</label>
</div>
</div>5Select all rows in a table
The header checkbox selects every row of the table.
| Order | Customer | Total | |
|---|---|---|---|
| #TX-6761 | Kai Quinn | $280.94 | |
| #PO-6831 | Nora Haddad | $574.31 | |
| #ORD-9342 | Aria Varga | $272.38 | |
| #TX-1953 | Elena Brennan | $466.68 |
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead>
<tr>
<th scope="col" style="width: 2.5rem;"><input class="form-check-input" type="checkbox" id="cb-table-all-609" data-demo-select-all="rows-608" aria-label="Select all orders"></th>
<th scope="col">Order</th>
<th scope="col">Customer</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #TX-6761"></td>
<td>#TX-6761</td>
<td>Kai Quinn</td>
<td class="text-end">$280.94</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #PO-6831"></td>
<td>#PO-6831</td>
<td>Nora Haddad</td>
<td class="text-end">$574.31</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #ORD-9342"></td>
<td>#ORD-9342</td>
<td>Aria Varga</td>
<td class="text-end">$272.38</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #TX-1953"></td>
<td>#TX-1953</td>
<td>Elena Brennan</td>
<td class="text-end">$466.68</td>
</tr>
</tbody>
</table>
</div>6Card checkboxes
Add-on cards that toggle on click and show a tick when selected.
<div class="row g-3">
<div class="col-md-4">
<input type="checkbox" class="btn-check" id="cb-card-610" autocomplete="off">
<label class="card h-100 tl-card-check" for="cb-card-610"><span class="card-body d-flex gap-3"><span class="fs-4 text-primary"><i class="bi bi-shield-check" aria-hidden="true"></i></span><span><span class="d-block fw-semibold">Extended warranty</span><span class="small text-body-secondary">+ $19.26</span></span><span class="tl-card-tick ms-auto text-primary"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span></span></label>
</div>
<div class="col-md-4">
<input type="checkbox" class="btn-check" id="cb-card-611" autocomplete="off">
<label class="card h-100 tl-card-check" for="cb-card-611"><span class="card-body d-flex gap-3"><span class="fs-4 text-primary"><i class="bi bi-gift-fill" aria-hidden="true"></i></span><span><span class="d-block fw-semibold">Gift wrapping</span><span class="small text-body-secondary">+ $7.43</span></span><span class="tl-card-tick ms-auto text-primary"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span></span></label>
</div>
<div class="col-md-4">
<input type="checkbox" class="btn-check" id="cb-card-612" autocomplete="off">
<label class="card h-100 tl-card-check" for="cb-card-612"><span class="card-body d-flex gap-3"><span class="fs-4 text-primary"><i class="bi bi-headset" aria-hidden="true"></i></span><span><span class="d-block fw-semibold">Priority support</span><span class="small text-body-secondary">+ $17.49</span></span><span class="tl-card-tick ms-auto text-primary"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span></span></label>
</div>
</div>7To-do list
Checked tasks are struck through with a tiny CSS rule.
TodayOct 5, 2025
- 09:30
- 07:15
- 16:15
- 09:45
- 07:15
<div class="card">
<div class="card-header d-flex justify-content-between">
<span class="fw-semibold">Today</span><span class="small text-body-secondary">Oct 5, 2025</span>
</div>
<ul class="list-group list-group-flush tl-todo">
<li class="list-group-item d-flex align-items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-613" checked><label class="form-check-label flex-grow-1" for="cb-todo-613">How to learn a new skill in 30 days</label><span class="badge text-bg-light border">09:30</span></li>
<li class="list-group-item d-flex align-items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-614" checked><label class="form-check-label flex-grow-1" for="cb-todo-614">The small habits that make a big difference</label><span class="badge text-bg-light border">07:15</span></li>
<li class="list-group-item d-flex align-items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-615"><label class="form-check-label flex-grow-1" for="cb-todo-615">Our favourite tips for busy weeks</label><span class="badge text-bg-light border">16:15</span></li>
<li class="list-group-item d-flex align-items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-616"><label class="form-check-label flex-grow-1" for="cb-todo-616">Five things we learned this year</label><span class="badge text-bg-light border">09:45</span></li>
<li class="list-group-item d-flex align-items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-617"><label class="form-check-label flex-grow-1" for="cb-todo-617">From teacher to UX designer: a career story</label><span class="badge text-bg-light border">07:15</span></li>
</ul>
</div>8Inline filters
Inline checkboxes for quick filters above a list.
Show:
<div class="d-flex flex-wrap align-items-center">
<span class="small fw-semibold me-2">Show:</span>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="cb-618" checked>
<label class="form-check-label" for="cb-618">Open</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="cb-619" checked>
<label class="form-check-label" for="cb-619">In progress</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="cb-620" checked>
<label class="form-check-label" for="cb-620">Closed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="cb-621">
<label class="form-check-label" for="cb-621">Archived</label>
</div>
</div>9Notification channels
A switch list with icons and secondary text.
<ul class="list-group">
<li class="list-group-item d-flex align-items-center gap-3"><span class="fs-5 text-primary"><i class="bi bi-bell-fill" aria-hidden="true"></i></span><label for="cb-ch-622" class="flex-grow-1"><span class="d-block fw-semibold">Push notifications</span><small class="text-body-secondary">On this device</small></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="cb-ch-622" checked></div></li>
<li class="list-group-item d-flex align-items-center gap-3"><span class="fs-5 text-primary"><i class="bi bi-envelope-fill" aria-hidden="true"></i></span><label for="cb-ch-623" class="flex-grow-1"><span class="d-block fw-semibold">Email</span><small class="text-body-secondary">To zoe.silva@example.com</small></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="cb-ch-623" checked></div></li>
<li class="list-group-item d-flex align-items-center gap-3"><span class="fs-5 text-primary"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i></span><label for="cb-ch-624" class="flex-grow-1"><span class="d-block fw-semibold">SMS</span><small class="text-body-secondary">To +1 (555) 768-7277</small></label><div class="form-check form-switch m-0"><input class="form-check-input" type="checkbox" role="switch" id="cb-ch-624" checked></div></li>
</ul>10Weekday toggles
Round toggle buttons for a recurring schedule.
Repeat on
<p class="fw-semibold mb-2">Repeat on</p>
<div class="d-flex flex-wrap gap-1" role="group" aria-label="Days of the week">
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-626" autocomplete="off" checked>
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-626">M<span class="visually-hidden">on</span></label>
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-627" autocomplete="off" checked>
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-627">T<span class="visually-hidden">ue</span></label>
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-628" autocomplete="off" checked>
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-628">W<span class="visually-hidden">ed</span></label>
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-629" autocomplete="off" checked>
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-629">T<span class="visually-hidden">hu</span></label>
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-630" autocomplete="off" checked>
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-630">F<span class="visually-hidden">ri</span></label>
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-631" autocomplete="off">
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-631">S<span class="visually-hidden">at</span></label>
<input type="checkbox" class="btn-check" name="weekday-625" id="cb-day-632" autocomplete="off">
<label class="btn btn-outline-primary rounded-circle tl-day" for="cb-day-632">S<span class="visually-hidden">un</span></label>
</div>11Chip checkboxes
Pill-shaped toggle buttons for picking interests or topics.
Your interests
<p class="fw-semibold mb-2">Your interests</p>
<div class="d-flex flex-wrap gap-2">
<input type="checkbox" class="btn-check" id="cb-chip-633" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-633">Cooking</label>
<input type="checkbox" class="btn-check" id="cb-chip-634" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-634">Gardening</label>
<input type="checkbox" class="btn-check" id="cb-chip-635" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-635">Design</label>
<input type="checkbox" class="btn-check" id="cb-chip-636" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-636">Travel</label>
<input type="checkbox" class="btn-check" id="cb-chip-637" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-637">Gaming</label>
<input type="checkbox" class="btn-check" id="cb-chip-638" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-638">Writing</label>
<input type="checkbox" class="btn-check" id="cb-chip-639" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-639">Startups</label>
<input type="checkbox" class="btn-check" id="cb-chip-640" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-pill px-3" for="cb-chip-640">Photography</label>
</div>12Checkboxes with descriptions
A heading-style label with an explanation underneath.
Anyone can see your published courses.
Students can contact you without an introduction.
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="cb-desc-641" aria-describedby="cb-desc-help-642" checked>
<label class="form-check-label fw-semibold" for="cb-desc-641">Public portfolio</label>
<div id="cb-desc-help-642" class="form-text mt-0">
Anyone can see your published courses.
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-desc2-643" aria-describedby="cb-desc2-help-644">
<label class="form-check-label fw-semibold" for="cb-desc2-643">Allow direct messages</label>
<div id="cb-desc2-help-644" class="form-text mt-0">
Students can contact you without an introduction.
</div>
</div>13Disabled checkboxes
Disabled unchecked and checked states with an explanation.
Some options are managed by your plan.
<div class="form-check">
<input class="form-check-input" type="checkbox" disabled id="cb-645">
<label class="form-check-label" for="cb-645">Export to PDF (Pro feature)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" disabled id="cb-646" checked>
<label class="form-check-label" for="cb-646">Encrypt files at rest (required)</label>
</div>
<p class="small text-body-secondary mt-2 mb-0"><i class="bi bi-info-circle-fill" aria-hidden="true"></i> Some options are managed by your plan.</p>14Permission matrix
Roles by permissions in a bordered table; owner rights are fixed.
| Role | View | Create | Edit | Delete |
|---|---|---|---|---|
| Owner | ||||
| Manager | ||||
| Member | ||||
| Guest |
<div class="table-responsive">
<table class="table table-bordered align-middle text-center mb-0">
<thead class="table-light">
<tr>
<th scope="col" class="text-start">Role</th>
<th scope="col">View</th>
<th scope="col">Create</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-start fw-normal">Owner</th>
<td><input class="form-check-input" type="checkbox" aria-label="Owner can view" checked disabled></td>
<td><input class="form-check-input" type="checkbox" aria-label="Owner can create" checked disabled></td>
<td><input class="form-check-input" type="checkbox" aria-label="Owner can edit" checked disabled></td>
<td><input class="form-check-input" type="checkbox" aria-label="Owner can delete" checked disabled></td>
</tr>
<tr>
<th scope="row" class="text-start fw-normal">Manager</th>
<td><input class="form-check-input" type="checkbox" aria-label="Manager can view" checked></td>
<td><input class="form-check-input" type="checkbox" aria-label="Manager can create" checked></td>
<td><input class="form-check-input" type="checkbox" aria-label="Manager can edit" checked></td>
<td><input class="form-check-input" type="checkbox" aria-label="Manager can delete"></td>
</tr>
<tr>
<th scope="row" class="text-start fw-normal">Member</th>
<td><input class="form-check-input" type="checkbox" aria-label="Member can view" checked></td>
<td><input class="form-check-input" type="checkbox" aria-label="Member can create" checked></td>
<td><input class="form-check-input" type="checkbox" aria-label="Member can edit"></td>
<td><input class="form-check-input" type="checkbox" aria-label="Member can delete"></td>
</tr>
<tr>
<th scope="row" class="text-start fw-normal">Guest</th>
<td><input class="form-check-input" type="checkbox" aria-label="Guest can view" checked></td>
<td><input class="form-check-input" type="checkbox" aria-label="Guest can create"></td>
<td><input class="form-check-input" type="checkbox" aria-label="Guest can edit"></td>
<td><input class="form-check-input" type="checkbox" aria-label="Guest can delete"></td>
</tr>
</tbody>
</table>
</div>15Nested checklist
A parent checkbox controls its indented children via data-demo-select-all.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-parent-647" data-demo-select-all="cb-kids-648" checked>
<label class="form-check-label fw-semibold" for="cb-parent-647">All categories</label>
</div>
<div class="ms-4 border-start ps-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cb-kids-648" id="cb-649" checked>
<label class="form-check-label" for="cb-649">Design</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cb-kids-648" id="cb-650" checked>
<label class="form-check-label" for="cb-650">Development</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="cb-kids-648" id="cb-651" checked>
<label class="form-check-label" for="cb-651">Business</label>
</div>
</div>16Consent checkboxes
Separate, unticked consent options with clear wording.
<div class="p-3 rounded-3 bg-body-tertiary small">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="cb-consent-1-652" required>
<label class="form-check-label" for="cb-consent-1-652">I agree to the <a href="#">Terms</a> (required)</label>
</div>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="cb-consent-2-653">
<label class="form-check-label" for="cb-consent-2-653">Send me tips and news from Musean</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cb-consent-3-654">
<label class="form-check-label" for="cb-consent-3-654">Share my feedback with partners</label>
</div>
</div>17Icon checkbox grid
Toggle buttons with icons for amenities and features.
<div class="row row-cols-2 row-cols-sm-3 g-2">
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-655" autocomplete="off" checked>
<label class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2" for="cb-amen-655"><i class="bi bi-wifi" aria-hidden="true"></i>Wi-Fi</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-656" autocomplete="off">
<label class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2" for="cb-amen-656"><i class="bi bi-p-circle-fill" aria-hidden="true"></i>Parking</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-657" autocomplete="off" checked>
<label class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2" for="cb-amen-657"><i class="bi bi-cup-hot-fill" aria-hidden="true"></i>Coffee</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-658" autocomplete="off">
<label class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2" for="cb-amen-658"><i class="bi bi-tv-fill" aria-hidden="true"></i>TV</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-659" autocomplete="off">
<label class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2" for="cb-amen-659"><i class="bi bi-snow" aria-hidden="true"></i>Air con</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-660" autocomplete="off">
<label class="btn btn-outline-secondary w-100 d-flex align-items-center gap-2" for="cb-amen-660"><i class="bi bi-universal-access" aria-hidden="true"></i>Accessible</label>
</div>
</div>18Large checkboxes
A custom size class for touch-friendly forms and kiosks.
<div class="form-check tl-check-lg mb-2">
<input class="form-check-input" type="checkbox" id="cb-lg-1-661" checked>
<label class="form-check-label" for="cb-lg-1-661">I have read the safety instructions</label>
</div>
<div class="form-check tl-check-lg">
<input class="form-check-input" type="checkbox" id="cb-lg-2-662">
<label class="form-check-label" for="cb-lg-2-662">I need assistance on arrival</label>
</div>19Filter facets with counts
Checkbox facets with result counts, as on a shop sidebar.
Brand
205
26
170
162
22
<div class="border rounded-3 p-3" style="max-width: 18rem;">
<h3 class="h6">Brand</h3>
<div class="form-check d-flex justify-content-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-663" checked>
<label class="form-check-label" for="cb-facet-663">Bloom Hub</label>
</span><span class="badge rounded-pill text-bg-light border">205</span>
</div>
<div class="form-check d-flex justify-content-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-664">
<label class="form-check-label" for="cb-facet-664">Junoo Studio</label>
</span><span class="badge rounded-pill text-bg-light border">26</span>
</div>
<div class="form-check d-flex justify-content-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-665">
<label class="form-check-label" for="cb-facet-665">Wrenio Flow</label>
</span><span class="badge rounded-pill text-bg-light border">170</span>
</div>
<div class="form-check d-flex justify-content-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-666">
<label class="form-check-label" for="cb-facet-666">Lumenis Nest</label>
</span><span class="badge rounded-pill text-bg-light border">162</span>
</div>
<div class="form-check d-flex justify-content-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-667">
<label class="form-check-label" for="cb-facet-667">Quill</label>
</span><span class="badge rounded-pill text-bg-light border">22</span>
</div>
<button type="button" class="btn btn-link btn-sm px-0">Show more</button>
</div>20Compare products
A Compare checkbox in each product card footer.
Leadership skills
$169.99
Web development
$254.00
Project management
$184.00
<div class="row row-cols-2 row-cols-md-3 g-3">
<div class="col">
<div class="card h-100">
<img src="../assets/img/product-10.svg" class="card-img-top" alt="Leadership skills">
<div class="card-body p-2">
<div class="small fw-semibold text-truncate">
Leadership skills
</div>
<div class="small text-body-secondary">
$169.99
</div>
</div>
<div class="card-footer bg-transparent">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="cb-compare-668">
<label class="form-check-label small" for="cb-compare-668">Compare</label>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="../assets/img/product-3.svg" class="card-img-top" alt="Web development">
<div class="card-body p-2">
<div class="small fw-semibold text-truncate">
Web development
</div>
<div class="small text-body-secondary">
$254.00
</div>
</div>
<div class="card-footer bg-transparent">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="cb-compare-669">
<label class="form-check-label small" for="cb-compare-669">Compare</label>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="../assets/img/product-6.svg" class="card-img-top" alt="Project management">
<div class="card-body p-2">
<div class="small fw-semibold text-truncate">
Project management
</div>
<div class="small text-body-secondary">
$184.00
</div>
</div>
<div class="card-footer bg-transparent">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="cb-compare-670">
<label class="form-check-label small" for="cb-compare-670">Compare</label>
</div>
</div>
</div>
</div>
</div>