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.