Create custom checkboxes in bootstrap-4?

In this article, we will look into how to create default and custom checkbox using bootstrap-4.3. The JSFiddle for demo is available here:

Default Checkbox

<link rel="stylesheet" href=""> <input type="checkbox" class="size" id="defaultCheckBox">
<label>Default checkbox</label>

Custom Checkbox

To create a custom checkbox in bootstrap-4.3, create an input checkbox element with class .custom-control-input. Wrap it in a div with class .custom-control and .custom-checkbox

<link rel="stylesheet" href="">

<div class="custom-control custom-checkbox"> 
  <input type="checkbox" class="custom-control-input" id="customCheckBox"> 
  <label class="custom-control-label" for="customCheckBox">Custom checkbox</label> 

Please note that if we add the label to the custom checkbox, add the class .custom-control-label. Also, the value of the for attribute should match the id of the checkbox.

Join Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.