section.container.mb-4.pb-3
  .row
    .col-xs-12
      h2.mt-2.mb-2.pt-2.pb-1 Toogle Checkbox
      .form-check
        label.form-check-label.form-check-toggle
          input.form-check-input(type='checkbox')
          span
      .form-check
        label.form-check-label.form-check-toggle
          input.form-check-input(type='checkbox', checked='checked')
          span You can also add support text.
View Compiled
.form-check {
    position: relative;
    display: block;
    margin-bottom: 0.75rem;
}

.form-check-toggle {
    position: relative;
    padding-left: 0;
    line-height: 30px;

    input {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 0%;
        height: 0%;
        margin: 0;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    input + span {
        cursor: pointer;
        user-select: none;
        height: 30px;
        margin-left: 70px;
        display: block;

        &:before {
            content: '';
            position: absolute;
            left: 0;
            display: inline-block;
            height: 30px;
            width: 50px;
            background: #FFF;
            border: solid 1px #eff2f3;
            //box-shadow: inset 0 0 5px $engie-gray-10;
            transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
            border-radius: 15px;
        }

        &:after {
            width: 28px;
            height: 28px;
            margin-top: 1px;
            margin-left: 1px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            background: #FFF;
            transition: margin-left 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            text-align: center;
            font-weight: bold;
            content: '';
            //border: solid $engie-black-01 0.05rem;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.05);
        }
    }

    input {
        &:checked + span {
            &:after {
                content: '';
                margin-left: 21px;
                box-shadow: none;
            }

            &:before {
                background-color: #86be4e;
                border-color: #86be4e;
                transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
            }
        }
    }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.