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="text-base font-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" 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 font-semibold" for="cb-mixed-597">All regions (2 of 4)</label>
</div>
<div class="ms-6">
<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-lg p-4">
<div class="form-check border-b 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 font-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 | |
|---|---|---|---|
| #ORD-7633 | Amara Duarte | $533.52 | |
| #TX-6613 | Lea Kowalski | $288.77 | |
| #ORD-9215 | Felix Lindqvist | $180.80 | |
| #ORD-6719 | Priya Ortega | $408.75 |
<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 #ORD-7633"></td>
<td>#ORD-7633</td>
<td>Amara Duarte</td>
<td class="text-end">$533.52</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #TX-6613"></td>
<td>#TX-6613</td>
<td>Lea Kowalski</td>
<td class="text-end">$288.77</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #ORD-9215"></td>
<td>#ORD-9215</td>
<td>Felix Lindqvist</td>
<td class="text-end">$180.80</td>
</tr>
<tr>
<td><input class="form-check-input" type="checkbox" name="rows-608" aria-label="Select order #ORD-6719"></td>
<td>#ORD-6719</td>
<td>Priya Ortega</td>
<td class="text-end">$408.75</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-full tl-card-check" for="cb-card-610"><span class="card-body flex gap-4"><span class="text-xl text-primary-ink"><i class="bi bi-shield-check" aria-hidden="true"></i></span><span><span class="block font-semibold">Extended warranty</span><span class="small text-muted">+ $49.07</span></span><span class="tl-card-tick ms-auto text-primary-ink"><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-full tl-card-check" for="cb-card-611"><span class="card-body flex gap-4"><span class="text-xl text-primary-ink"><i class="bi bi-gift" aria-hidden="true"></i></span><span><span class="block font-semibold">Gift wrapping</span><span class="small text-muted">+ $6.14</span></span><span class="tl-card-tick ms-auto text-primary-ink"><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-full tl-card-check" for="cb-card-612"><span class="card-body flex gap-4"><span class="text-xl text-primary-ink"><i class="bi bi-headset" aria-hidden="true"></i></span><span><span class="block font-semibold">Priority support</span><span class="small text-muted">+ $29.51</span></span><span class="tl-card-tick ms-auto text-primary-ink"><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.
TodaySep 13, 2026
- 20:00
- 16:30
- 17:45
- 15:45
- 17:30
<div class="card">
<div class="card-header flex justify-between">
<span class="font-semibold">Today</span><span class="small text-muted">Sep 13, 2026</span>
</div>
<ul class="list-group list-group-flush tl-todo">
<li class="list-group-item flex items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-613" checked><label class="form-check-label grow" for="cb-todo-613">How to get the most out of a conference</label><span class="badge text-bg-light border">20:00</span></li>
<li class="list-group-item flex items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-614" checked><label class="form-check-label grow" for="cb-todo-614">What our attendees asked us most</label><span class="badge text-bg-light border">16:30</span></li>
<li class="list-group-item flex items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-615"><label class="form-check-label grow" for="cb-todo-615">A beginner's guide to getting started</label><span class="badge text-bg-light border">17:45</span></li>
<li class="list-group-item flex items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-616"><label class="form-check-label grow" for="cb-todo-616">What we learned from last year's feedback</label><span class="badge text-bg-light border">15:45</span></li>
<li class="list-group-item flex items-center gap-2"><input class="form-check-input m-0" type="checkbox" id="cb-todo-617"><label class="form-check-label grow" for="cb-todo-617">What makes a panel worth watching</label><span class="badge text-bg-light border">17:30</span></li>
</ul>
</div>8Inline filters
Inline checkboxes for quick filters above a list.
Show:
<div class="flex flex-wrap items-center">
<span class="small font-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 flex items-center gap-4"><span class="text-lg text-primary-ink"><i class="bi bi-bell" aria-hidden="true"></i></span><label for="cb-ch-622" class="grow"><span class="block font-semibold">Push notifications</span><small class="text-muted">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 flex items-center gap-4"><span class="text-lg text-primary-ink"><i class="bi bi-envelope" aria-hidden="true"></i></span><label for="cb-ch-623" class="grow"><span class="block font-semibold">Email</span><small class="text-muted">To aria.novak@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 flex items-center gap-4"><span class="text-lg text-primary-ink"><i class="bi bi-chat-dots" aria-hidden="true"></i></span><label for="cb-ch-624" class="grow"><span class="block font-semibold">SMS</span><small class="text-muted">To +1 (555) 446-3091</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="font-semibold mb-2">Repeat on</p>
<div class="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-full tl-day" for="cb-day-626">M<span class="sr-only">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-full tl-day" for="cb-day-627">T<span class="sr-only">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-full tl-day" for="cb-day-628">W<span class="sr-only">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-full tl-day" for="cb-day-629">T<span class="sr-only">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-full tl-day" for="cb-day-630">F<span class="sr-only">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-full tl-day" for="cb-day-631">S<span class="sr-only">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-full tl-day" for="cb-day-632">S<span class="sr-only">un</span></label>
</div>11Chip checkboxes
Pill-shaped toggle buttons for picking interests or topics.
Your interests
<p class="font-semibold mb-2">Your interests</p>
<div class="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-full px-4" for="cb-chip-633">Music</label>
<input type="checkbox" class="btn-check" id="cb-chip-634" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-full px-4" 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-full px-4" for="cb-chip-635">Cooking</label>
<input type="checkbox" class="btn-check" id="cb-chip-636" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-full px-4" for="cb-chip-636">Photography</label>
<input type="checkbox" class="btn-check" id="cb-chip-637" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary rounded-full px-4" for="cb-chip-637">Travel</label>
<input type="checkbox" class="btn-check" id="cb-chip-638" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-secondary rounded-full px-4" for="cb-chip-638">Startups</label>
<input type="checkbox" class="btn-check" id="cb-chip-639" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-full px-4" for="cb-chip-639">Writing</label>
<input type="checkbox" class="btn-check" id="cb-chip-640" autocomplete="off">
<label class="btn btn-sm btn-outline-secondary rounded-full px-4" for="cb-chip-640">Design</label>
</div>12Checkboxes with descriptions
A heading-style label with an explanation underneath.
Anyone can see your published tickets.
Attendees can contact you without an introduction.
<div class="form-check mb-4">
<input class="form-check-input" type="checkbox" id="cb-desc-641" aria-describedby="cb-desc-help-642" checked>
<label class="form-check-label font-semibold" for="cb-desc-641">Public portfolio</label>
<div id="cb-desc-help-642" class="form-text mt-0">
Anyone can see your published tickets.
</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 font-semibold" for="cb-desc2-643">Allow direct messages</label>
<div id="cb-desc2-help-644" class="form-text mt-0">
Attendees 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-muted mt-2 mb-0"><i class="bi bi-info-circle" 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 font-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 font-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 font-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 font-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 font-semibold" for="cb-parent-647">All categories</label>
</div>
<div class="ms-6 border-s ps-4">
<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">Keynote</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">Workshop</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">Panel</label>
</div>
</div>16Consent checkboxes
Separate, unticked consent options with clear wording.
<div class="p-4 rounded-lg bg-surface-3 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 Zeni Studio</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">
<label class="btn btn-outline-secondary w-full flex 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-full flex items-center gap-2" for="cb-amen-656"><i class="bi bi-p-circle" aria-hidden="true"></i>Parking</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-657" autocomplete="off">
<label class="btn btn-outline-secondary w-full flex items-center gap-2" for="cb-amen-657"><i class="bi bi-cup-hot" aria-hidden="true"></i>Coffee</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-658" autocomplete="off" checked>
<label class="btn btn-outline-secondary w-full flex items-center gap-2" for="cb-amen-658"><i class="bi bi-tv" aria-hidden="true"></i>TV</label>
</div>
<div class="col">
<input type="checkbox" class="btn-check" id="cb-amen-659" autocomplete="off" checked>
<label class="btn btn-outline-secondary w-full flex 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-full flex 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
223
118
181
71
159
<div class="border rounded-lg p-4" style="max-width: 18rem;">
<h3 class="h6">Brand</h3>
<div class="form-check flex justify-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-663" checked>
<label class="form-check-label" for="cb-facet-663">Nimbusly Labs</label>
</span><span class="badge rounded-full text-bg-light border">223</span>
</div>
<div class="form-check flex justify-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-664">
<label class="form-check-label" for="cb-facet-664">Hive HQ</label>
</span><span class="badge rounded-full text-bg-light border">118</span>
</div>
<div class="form-check flex justify-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-665">
<label class="form-check-label" for="cb-facet-665">Iris</label>
</span><span class="badge rounded-full text-bg-light border">181</span>
</div>
<div class="form-check flex justify-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-666">
<label class="form-check-label" for="cb-facet-666">Rally</label>
</span><span class="badge rounded-full text-bg-light border">71</span>
</div>
<div class="form-check flex justify-between">
<span><input class="form-check-input" type="checkbox" id="cb-facet-667">
<label class="form-check-label" for="cb-facet-667">Rallyan Pro</label>
</span><span class="badge rounded-full text-bg-light border">159</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.
VIP pass
$826.99
Masterclass
$274.00
Early bird pass
$325.99
<div class="row row-cols-2 row-cols-md-3 g-3">
<div class="col">
<div class="card h-full">
<img src="../assets/img/product-4.svg" class="card-img-top" alt="VIP pass">
<div class="card-body p-2">
<div class="small font-semibold truncate">
VIP pass
</div>
<div class="small text-muted">
$826.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-full">
<img src="../assets/img/product-9.svg" class="card-img-top" alt="Masterclass">
<div class="card-body p-2">
<div class="small font-semibold truncate">
Masterclass
</div>
<div class="small text-muted">
$274.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-full">
<img src="../assets/img/product-1.svg" class="card-img-top" alt="Early bird pass">
<div class="card-body p-2">
<div class="small font-semibold truncate">
Early bird pass
</div>
<div class="small text-muted">
$325.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-670">
<label class="form-check-label small" for="cb-compare-670">Compare</label>
</div>
</div>
</div>
</div>
</div>