Bootstrap Checks and Radios
Checkboxes let people turn options on or off independently, while radio buttons force a single choice from a group. Bootstrap 5 wraps both in the .form-check family of classes for a crisp, custom look that still behaves like the native controls.
Checkboxes
Wrap each checkbox in a <div class="form-check">. Give the <input> the classes .form-check-input and its label the class .form-check-label. Because the input and label share an id relationship, clicking the text also toggles the box.
A single checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="terms">
<label class="form-check-label" for="terms">
I agree to the terms
</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Radio buttons
Radios use the same markup, but with type="radio". The key detail: every radio in the same group must share the same name attribute. That shared name is what makes the browser allow only one to be selected at a time.
A group of radios
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-check">
<input class="form-check-input" type="radio" name="plan" id="free" checked>
<label class="form-check-label" for="free">Free</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="plan" id="pro">
<label class="form-check-label" for="pro">Pro</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Switches and inline layout
Add .form-switch to a checkbox wrapper to render a modern toggle switch instead of a square box. To place several checks side by side on one row, add .form-check-inline to each wrapper.
A switch and inline checks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" id="notify" checked>
<label class="form-check-label" for="notify">Email notifications</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="a">
<label class="form-check-label" for="a">A</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="b">
<label class="form-check-label" for="b">B</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Checks and radios reference
