Custom checkbox in bootstrap 4.1.x

Question

I require a checkbox like this one or similar

There are lots of answers about styling checkboxes but none worked in bootstrap 4.1.x, either I am using them wrong or they are not working in this bootstrap version.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-description">Check this custom checkbox</span> </label>

Answer 1

Change

 <span class="custom-control-description">Check this custom checkbox</span>

to

<span class="custom-control-label">Check this custom checkbox</span>

What you are missing the class label, it should not be description it should be label.

 const checkbox = document.getElementById('checkbox') checkbox.checked = true

 .custom-control-input:checked~.custom-control-label::before { color: white !important; background-color: green !important; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <label class="custom-control custom-checkbox"> <input type="checkbox" id="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> <span class="custom-control-label">Check this custom checkbox</span> </label>

Here is the release notes

Answer 2

here is how you can make a custom checkbox with bootstrap and fontawesome

 <style> .custom-checkbox { padding: 0; } .custom-checkbox .fa-toggle-on, .custom-checkbox .fa-toggle-off { font-size: 135%; /*this icon is relatively small*/ } .custom-checkbox input[type=checkbox] { visibility: collapse; width: 0px; margin-left: -0.25em; } .custom-checkbox input[type=checkbox] ~ .custom-check-on { display: none; } .custom-checkbox input[type=checkbox]:checked ~ .custom-check-on { display: inline; } .custom-checkbox input[type=checkbox]:checked ~ .custom-check-off { display: none; } .custom-checkbox input[type=checkbox]:disabled ~ * { color: #b6b4b4; } .custom-checkbox input[type=checkbox].error ~ .custom-check-on, .custom-checkbox input[type=checkbox].error ~ .custom-check-off { border: solid 2px red; } .custom-checkbox i.btn { overflow: hidden; color: transparent; position: relative; display: inline-block; width: 3em; padding: 0; font-style: normal; } .custom-checkbox .btn:after { content: ""; font-style: normal; border: 7px solid white; position: absolute; top: 0; bottom: 0; border-radius: 5px; } .custom-checkbox .custom-check-on.btn:after { right: -4px; } .custom-checkbox .custom-check-off.btn:after { left: -4px; } .custom-checkbox .custom-check-on.btn:before { content: "On"; color: white; margin-left: -10px; } .custom-checkbox .custom-check-off.btn:before { content: "Off"; color: #333; margin-right: -15px; } .custom-checkbox input[type=checkbox]:checked ~ .btn.custom-check-on { display: inline-block; } </style>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> <div class="container"> <h3>Create custom checkbox with Bootstrap and Font Awesome</h3> <p>Here are some samples of customcheckboxes. You litterly can use any shape or color to make them the way you like it</p> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on btn btn-primary btn-sm"> </i><i class="custom-check-off btn btn-light active btn-sm"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on fa fa fa-circle"> </i><i class="custom-check-off fal fa-circle"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on far fa-check-square" style="color:black" > </i><i class="custom-check-off far fa-square" style="color:lightgray"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on text-info fa fa-toggle-on"> </i><i class="custom-check-off text-secondary fa fa-toggle-off"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on text-success far fa-smile"> </i><i class="custom-check-off text-danger fas fa-angry"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> <label class="custom-checkbox"> <input name="check" type="checkbox" autocomplete="off" > <i class="custom-check-on fas fa-arrow-alt-circle-up"> </i><i class="custom-check-off far fa-arrow-alt-circle-down"> </i><input name="check" type="hidden" value="false"> <span class="ml-1"> Check Box </span> </label> <br> </div>