4

I require a checkbox like this one or similar

enter image description here

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>
WasiF
  • 26,101
  • 16
  • 120
  • 128

2 Answers2

4

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

WasiF
  • 26,101
  • 16
  • 120
  • 128
Just code
  • 13,553
  • 10
  • 51
  • 93
  • Thank you :), how to change color of the checkbox and what if require a complete square edges instead of smooth. Can you help please? – WasiF Dec 25 '18 at 07:33
  • You have classes now apply color to it – Just code Dec 25 '18 at 07:38
  • 1
    In case you want to change color, then extend these classes `.custom-control-input:checked~.custom-control-label::before { color: #fff !important; border-color: #3d7c54 !important; background-color: #175a11 !important; }` – WasiF Dec 25 '18 at 09:11
  • 1
    @WasiF: I'd remove the use of `custom-control-indicator` span from your HTML since you're doing that purely in CSS it seems like. Also, the `custom-control-indicator` class doesn't exist in the latest versions of Bootstrap (**v4.0.0+**). It did in **4.0.0-alpha.6**. – Voicu Jan 10 '20 at 19:19
  • Hi @Justcode, it seems that box didn't align center with the text. Any solution? Thanks. – frank61003 Jul 19 '22 at 08:25
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>
Kevin Eghbali
  • 41
  • 1