Summarize this article with:
Default browser checkboxes look different on every device. Ugly on some. Broken on others.
Bootstrap checkbox examples solve this problem with consistent, styled form controls that work across all browsers.
Whether you’re building a Bootstrap login form, a settings page, or a multi-select filter, checkboxes are everywhere.
This guide covers everything: basic markup, inline and stacked layouts, custom styling, form validation, and checkbox manipulation with event listeners.
You’ll find copy-paste code snippets for each variation.
By the end, you’ll know how to create accessible, good-looking checkboxes that match your user interface design.
What is a Bootstrap Checkbox
A Bootstrap checkbox is a form input element styled using the Bootstrap framework’s pre-built classes.
It lets users select one or multiple options from a set of choices.
Unlike default browser checkboxes, Bootstrap checkboxes look consistent across Chrome, Firefox, Safari, and Edge.
The framework wraps standard HTML input elements with custom CSS styling, giving you modern checkbox designs without writing extra code.
Bootstrap checkboxes work inside Bootstrap forms and integrate with the framework’s validation system.
Bootstrap Checkbox Examples
Checkbox V02
Custom checkbox
Jelly Checkbox
Checkbox V06
Animated radios & checkboxes (noJS)
Cardboard Check Box
Turn Bootstrap Checkbox Into Switches
Checkbox V09
Checkboxes And Removable Labels
Animated SVG Checkboxes
Using Checkboxes In Bootstrap With Treeview
Bootstrap 4 Ripple/Wave Custom Checkbox Style Radio Button
Checkbox V14
Inline Multiple checkboxes example
Custom CSS Checkbox
Pretty looking checkboxes by Bootstrap
Bootstrap 4 Delightful Checkbox Group Animation
How to Create a Basic Bootstrap Checkbox
Creating a checkbox in Bootstrap takes two elements: an input and a label wrapped in a container div.
The markup follows a specific pattern that Bootstrap’s stylesheet targets for styling.
Default Checkbox Markup
Wrap your checkbox in a div with the form-check class.
Add input type=”checkbox” with form-check-input, then a label with form-check-label.
“ <div class="form-check"> <input class="form-check-input" type="checkbox" id="defaultCheck"> <label class="form-check-label" for="defaultCheck"> Default checkbox </label> </div> `
Bootstrap Checkbox Class Structure
Three classes control everything: form-check (wrapper), form-check-input (the checkbox), form-check-label (the text).
The for attribute on your label must match the checkbox id for proper click behavior and web accessibility.
Bootstrap Checkbox Variations
Bootstrap gives you several checkbox layouts out of the box.
Each variation uses modifier classes added to the existing structure.
Inline Checkboxes
Add form-check-inline to display checkboxes horizontally on the same line.
` <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inline1"> <label class="form-check-label" for="inline1">Option 1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inline2"> <label class="form-check-label" for="inline2">Option 2</label> </div> `
Stacked Checkboxes
The default behavior stacks checkboxes vertically, each on its own line.
No extra classes needed, just repeat the form-check pattern.
Disabled Checkboxes
Add the disabled attribute to the input element.
Bootstrap automatically grays out both the checkbox and its label.
` <div class="form-check"> <input class="form-check-input" type="checkbox" id="disabledCheck" disabled> <label class="form-check-label" for="disabledCheck"> Disabled checkbox </label> </div> `
Indeterminate Checkboxes
The indeterminate state shows a horizontal line instead of a checkmark.
You set this state through JavaScript since HTML has no indeterminate attribute.
` document.getElementById("myCheckbox").indeterminate = true; `
Bootstrap Checkbox with Labels
Labels do more than describe checkboxes.
They expand the clickable area and improve form accessibility for screen readers.
Label Positioning
Labels appear to the right of checkboxes by default.
For left-positioned labels, use the form-check-reverse class on the wrapper div.
` <div class="form-check form-check-reverse"> <input class="form-check-input" type="checkbox" id="reverseCheck"> <label class="form-check-label" for="reverseCheck"> Reverse label </label> </div> `
Label Styling Options
Apply any Bootstrap text utility class to your labels: text-muted, fw-bold, text-primary, small.
Keep labels short, usually under five words for better usability.
Custom Bootstrap Checkboxes
Bootstrap 5 uses custom checkbox styling by default.
Earlier versions required extra classes, but now form-check handles everything.
Custom Checkbox Appearance
The form-check-input class replaces browser defaults with Bootstrap’s custom design.
Checkboxes get rounded corners, smooth transitions, and a blue fill when checked.
Custom Checkbox Colors
Override the default blue with CSS custom properties or utility classes.
` .form-check-input:checked { background-color: #198754; border-color: #198754; } `
For quick changes, Bootstrap’s background utilities work: style the checkbox using variables like –bs-primary or create your own custom CSS checkbox styles.
Bootstrap Checkbox in Forms
Checkboxes rarely exist alone.
They sit inside forms alongside Bootstrap input fields, dropdowns, and submit buttons.
Checkbox Form Validation
Add needs-validation to your form element and include feedback divs after each checkbox.
` <form class="needs-validation" novalidate> <div class="form-check"> <input class="form-check-input" type="checkbox" id="terms" required> <label class="form-check-label" for="terms">Accept terms</label> <div class="invalid-feedback">You must agree before submitting.</div> </div> <button class="btn btn-primary" type="submit">Submit</button> </form> `
Required Checkbox Fields
The required attribute blocks form submission until the checkbox is checked.
Pair it with invalid-feedback to show custom validation messages on submit attempts.
Bootstrap Checkbox with JavaScript
Static checkboxes only get you so far.
Real applications need dynamic checkbox control through DOM manipulation and event handling.
Getting Checkbox Values
Access the checked property to determine checkbox state, returns true or false.
` const isChecked = document.getElementById("myCheckbox").checked;
// For multiple checkboxes const checkedBoxes = document.querySelectorAll(‘input[type=”checkbox”]:checked’); const values = Array.from(checkedBoxes).map(cb => cb.value); `
Checkbox Event Handling
Listen for the change event to react when users toggle checkboxes.
` document.getElementById("myCheckbox").addEventListener("change", function() { console.log("Checkbox state:", this.checked); }); `
Programmatic Checkbox Control
Set the checked property directly to check or uncheck via code.
` // Check the box document.getElementById("myCheckbox").checked = true;
// Uncheck the box document.getElementById(“myCheckbox”).checked = false; `
Bootstrap Checkbox Group
Checkbox groups let users pick multiple options from related choices.
Common uses: filter selections, preference settings, multi-select forms.
Multiple Selection Checkboxes
Stack form-check divs together, give each checkbox a unique id but related name attribute for form data grouping.
` <div class="form-check"> <input class="form-check-input" type="checkbox" name="colors" value="red" id="red"> <label class="form-check-label" for="red">Red</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="colors" value="blue" id="blue"> <label class="form-check-label" for="blue">Blue</label> </div> `
Select All Checkbox Implementation
Create a master checkbox that toggles all others in the group.
` document.getElementById("selectAll").addEventListener("change", function() { const checkboxes = document.querySelectorAll('input[name="colors"]'); checkboxes.forEach(cb => cb.checked = this.checked); }); `
Bootstrap Checkbox Accessibility
Accessible checkboxes work for everyone: keyboard users, screen reader users, users with motor impairments.
Bootstrap handles basics automatically, but some situations need extra ARIA attributes.
ARIA Labels for Checkboxes
Use aria-label when visible labels aren’t possible; use aria-describedby to link help text.
` <input class="form-check-input" type="checkbox" aria-label="Subscribe to newsletter">
<input class=”form-check-input” type=”checkbox” aria-describedby=”helpText” id=”promo”> <small id=”helpText”>We send max 2 emails per month.</small> `
Keyboard Navigation
Bootstrap checkboxes support Tab to focus and Space to toggle by default.
Ensure proper tab order by avoiding positive tabindex values; let natural DOM order guide focus flow.
Bootstrap Checkbox vs Radio Button
Both are selection controls. Different use cases.
Checkboxes: multiple selections allowed, independent choices, can select all or none.
Radio buttons: single selection only, mutually exclusive options, one must be selected.
Quick rule: if users can pick more than one option, use checkboxes.
For binary yes/no toggles, consider a Bootstrap toggle switch instead.
| Feature | Checkbox | Radio Button | | — | — | — | | Multiple selections | Yes | No | | Zero selections allowed | Yes | No | | Input type | checkbox | radio | | Common use | Filters, preferences | Single choice questions |
Both components use nearly identical markup, just swap type=”checkbox” for type=”radio” and ensure radio buttons share the same name attribute.
FAQ on Bootstrap Checkbox Examples
How do I create a checkbox in Bootstrap?
Wrap an input element with type=”checkbox” inside a div with the form-check class. Add form-check-input to the input and form-check-label to the label. Link them using matching id and for attributes.
How do I style a Bootstrap checkbox?
Bootstrap 5 styles checkboxes automatically through the form-check-input class. Override defaults by targeting this class in your stylesheet. Change background-color, border-color, and border-radius properties to match your design.
How do I make Bootstrap checkboxes inline?
Add the form-check-inline class to each form-check wrapper div. This displays checkboxes horizontally on the same line instead of stacked vertically. Works great for short option lists in compact layouts.
How do I get checkbox values in JavaScript?
Access the checked property on the checkbox element. It returns true when checked, false when unchecked. Use querySelectorAll with the :checked selector to get all selected checkboxes from a group.
How do I disable a Bootstrap checkbox?
Add the disabled attribute directly to the input element. Bootstrap automatically applies gray styling to both the checkbox and its label. Users cannot interact with disabled checkboxes or change their state.
How do I make a checkbox required in Bootstrap?
Add the required attribute to your checkbox input. Combine with Bootstrap’s validation classes by adding needs-validation to your form. Include an invalid-feedback div to display custom error messages on submission.
How do I check a checkbox by default?
Add the checked attribute to the input element. The checkbox loads in a checked state when the page renders. Remove this attribute if you want the checkbox unchecked on initial page load.
How do I create a select all checkbox?
Create a master checkbox that controls a group. Add a change event listener to it. When triggered, loop through all related checkboxes and set their checked property to match the master checkbox state.
What is the difference between checkbox and radio button?
Checkboxes allow multiple selections from a group. Radio buttons allow only one selection. Use checkboxes for independent choices like filters. Use radio buttons for mutually exclusive options like payment methods.
How do I make Bootstrap checkboxes accessible?
Always pair checkboxes with labels using matching id and for attributes. Add aria-label for icon-only checkboxes. Use aria-describedby to link helper text. Ensure proper color contrast between checked and unchecked states.
Conclusion
These Bootstrap checkbox examples give you everything needed to build professional form controls.
You’ve learned the form-check class structure, checkbox groups, checked states, and DOM manipulation techniques.
The code snippets work in Bootstrap 5 and maintain cross-browser compatibility across Chrome, Firefox, Safari, and Edge.
Start with basic markup. Add validation when needed. Layer in custom styling to match your project.
Keep accessibility in mind by pairing inputs with labels and supporting keyboard navigation.
Test your checkboxes on mobile devices too, since touch targets need adequate spacing.
Bookmark this guide and reference it whenever you need checkbox markup for Bootstrap contact forms, settings panels, or filter interfaces.
