BootstrapHow-ToBeginner · 3 min read

How to Create Checkbox in Bootstrap: Simple Guide

To create a checkbox in Bootstrap, use the form-check class on a container with an input of type checkbox and a label with class form-check-label. This ensures proper styling and spacing according to Bootstrap's design.

📐

Syntax

Bootstrap checkboxes use a wrapper with the form-check class. Inside it, place an input element with type="checkbox" and class form-check-input. Then add a label with class form-check-label linked to the input using the for attribute.

form-check: container for checkbox
form-check-input: styles the checkbox input
form-check-label: styles the label text

html

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="checkboxExample">
  <label class="form-check-label" for="checkboxExample">
    Example checkbox
  </label>
</div>

Output

A single styled checkbox with label 'Example checkbox' next to it.

💻

Example

This example shows a simple Bootstrap checkbox inside a form. The checkbox is styled with spacing and alignment by Bootstrap classes.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Checkbox Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <form>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="subscribeCheck">
        <label class="form-check-label" for="subscribeCheck">
          Subscribe to newsletter
        </label>
      </div>
    </form>
  </div>
</body>
</html>

Output

A webpage with a checkbox labeled 'Subscribe to newsletter' styled by Bootstrap with proper spacing and alignment.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap checkboxes include:

Not using the form-check container, which breaks spacing and alignment.
Missing the form-check-input class on the input, causing default browser styles to show.
Not linking the label to the input using the for attribute and matching id, which hurts accessibility and clicking the label won't toggle the checkbox.

html

<!-- Wrong way: missing classes and container -->
<input type="checkbox" id="wrongCheck">
<label for="wrongCheck">Wrong checkbox</label>

<!-- Right way: with Bootstrap classes and container -->
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="rightCheck">
  <label class="form-check-label" for="rightCheck">Right checkbox</label>
</div>

Output

The first checkbox looks plain and unstyled; the second checkbox is styled with proper spacing and label clickable.

📊

Quick Reference

Summary tips for Bootstrap checkboxes:

Part	Description
form-check	Wrapper div for checkbox and label
form-check-input	Class for the checkbox input element
form-check-label	Class for the label linked to checkbox
for attribute	Links label to input's id for accessibility
type="checkbox"	Defines the input as a checkbox

✅

Key Takeaways

Always wrap checkbox and label in a form-check container for proper Bootstrap styling.

Use form-check-input class on the checkbox input to get Bootstrap's custom styles.

Link the label to the checkbox input using matching for and id attributes for accessibility and usability.

Include Bootstrap CSS in your project to see the styled checkboxes.

Avoid missing classes or container to prevent broken layout and default browser styles.