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

[code language=”html”]

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt; <input type="checkbox" class="size" id="defaultCheckBox">
<label>Default checkbox</label>

[/code]

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

[code language=”html”]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;

<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>

[/code]