Create custom checkboxes in bootstrap-4?

Bootstrap, CSS, HTML Leave a comment

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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<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> 
</div>
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.