Bootstrap class: .custom-checkbox

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Preview

Check this custom checkbox

Check .custom-checkbox in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _custom-forms.scss:98 */
.custom-checkbox {
  .custom-control-label::before {
    @include border-radius($custom-checkbox-indicator-border-radius);
  }

  .custom-control-input:checked ~ .custom-control-label {
    &::before {
      @include gradient-bg($custom-control-indicator-checked-bg);
    }
    &::after {
      background-image: $custom-checkbox-indicator-icon-checked;
    }
  }

  .custom-control-input:indeterminate ~ .custom-control-label {
    &::before {
      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
    }
    &::after {
      background-image: $custom-checkbox-indicator-icon-indeterminate;
    }
  }

  .custom-control-input:disabled {
    &:checked ~ .custom-control-label::before {
      background-color: $custom-control-indicator-checked-disabled-bg;
    }
    &:indeterminate ~ .custom-control-label::before {
      background-color: $custom-control-indicator-checked-disabled-bg;
    }
  }
}

Uses variables

/* _custom-forms.scss:98 */
$custom-checkbox-indicator-border-radius
$custom-control-indicator-checked-bg
$custom-checkbox-indicator-icon-checked
$custom-checkbox-indicator-indeterminate-bg
$custom-checkbox-indicator-indeterminate-box-shadow
$custom-checkbox-indicator-icon-indeterminate
$custom-control-indicator-checked-disabled-bg
$custom-control-indicator-checked-disabled-bg