How to create custom checkboxes in Bootstrap

Use Bootstrap's built-in .form-check and .form-check-input classes to quickly create custom check boxes without additional CSS; 2. Add custom CSS classes to further control the appearance, such as size, color, borders and check marks when selected; 3. Different theme styles can be implemented in combination with Bootstrap color system or custom classes; 4. Always ensure that check boxes are associated with labels, use aria attributes to improve accessibility, and avoid using display: none to ensure keyboard navigation and screen reader compatibility, so as to achieve aesthetic design while maintaining functional integrity.

Creating custom checkboxes in Bootstrap is straightforward, especially with Bootstrap 5's built-in support for custom form controls. You can style checkboxes to match your design while maintaining accessibility and responsiveness. Here's how to do it effectively.

Use Bootstrap's Built-in Custom Checkbox Classes

Bootstrap provides utility classes to replace default checkboxes with custom-styled ones. The key is using the .form-check wrapper and .form-check-input on the input element.

 <div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="customCheckbox1">
  <label class="form-check-label" for="customCheckbox1">
    Custom Checkbox
  </label>
</div>

This automatically removes the browser's default checkbox appearance and apply Bootstrap's clean, modern style. No extra CSS is needed for basic customization.

Customize Appearance with CSS

If you want more control over the look (eg, rounded corners, custom check marks, colors), override the default styles with your own CSS.

 <div class="form-check">
  <input class="form-check-input custom-checkbox" type="checkbox" id="styledCheckbox">
  <label class="form-check-label" for="styledCheckbox">
    Styled Checkbox
  </label>
</div>

And add custom CSS:

 .custom-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #0d6efd;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  background-color: #fff;
  cursor: pointer;
}

.custom-checkbox:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.custom-checkbox:checked::after {
  content: '✓';
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This gives you full control over size, color, border, and the checkmark symbol.

Customize with Colors and States

You can extend styling for different states or themes using Bootstrap's color system:

• Use .form-check-primary , .form-check-success , etc., for colored checkboxes (Bootstrap 5.2 supports these in some settings).
• Or create your own classes:

 .form-check-warning .form-check-input {
  background-color: #ffc107;
  border-color: #ffc107;
}

Wrap with a custom class:

 <div class="form-check form-check-warning">
  <input class="form-check-input" type="checkbox" id="warningCheck">
  <label class="form-check-label" for="warningCheck">
    Warning Option
  </label>
</div>

Accessibility and Best Practices

• Always pair checkboxes with a <label></label> using the for attribute.
• Use aria-label or aria-labelledby if the label isn't visible.
• Test keyboard navigation and screen readers.
• Avoid hiding inputs with display: none —use opacity: 0 with positioning if overlaying custom graphics.

Basically, Bootstrap makes it easy to start with clean custom checkboxes, and with a bit of CSS, you can tailor them to your site's design without losing functionality.

The above is the detailed content of How to create custom checkboxes in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!