Custom Checkboxes

Custom rounded checkboxes with alphabet characters to use with contacts and related lists.

Page Demo

Basic example

You can use background-color utility classes to change the background color of the checkboxes.

<div class="custom-control custom-control--char">
    <input type="checkbox" class="custom-control-input" id="custom-checkbox-1">
    <label class="custom-control-label-char" for="custom-checkbox-1"><i class="bg-red">B</i></label>
</div>

Requirements:

  • /scss/inc/bootstrap-overrides/_custom-forms.scss