Bootstrap toggle switch

by moku23

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Demo header-->
<section class="py-5 header text-center text-white">
    <div class="container py-4">
        <header>
            <h1 class="display-4">Bootstrap toggle switch</h1>
            <p class="font-italic mb-1">Create bootstrap toggle switches using Bootstrap custom form components.</p>
            <p class="font-italic">Snippet by
                <a class="text-white" href="https://bootstrapious.com/">
                    <u>Bootstrapious</u>
                </a>
            </p>
        </header>
    </div>
</section>


<section class="pb-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <!-- Default switches with radio inputs-->
                <p class="font-italic text-muted">Standard checkbox switches - with bootstrap theme colors.</p>
                <div class="row mb-5">
                    <div class="col-lg-4">
                        <div class="card rounded-0 border-0 shadow mb-4">
                            <div class="card-body p-4 text-center">
                                <!-- Custom switch -->
                                <p class="custom-control custom-switch">
                                <label class="custom-control-label font-italic">MT4</label>
                                    <input class="custom-control-input" id="customSwitch1" type="checkbox" checked>
                                    <label class="custom-control-label font-italic" for="customSwitch1">mt5</label>
                                </p>

                                <!--...

CSS

/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
/* toggle switches with bootstrap default colors */
.custom-control-input-success:checked ~ .custom-control-label::before {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
}

.custom-control-input-danger:checked ~ .custom-control-label::before {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
}

.custom-control-input-warning:checked ~ .custom-control-label::before {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
}

.custom-control-input-info:checked ~ .custom-control-label::before {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

/* Large toggl switches */
.custom-switch-lg .custom-control-label::before {
    left: -2.25rem;
    width: 3rem;
    border-radius: 1.5rem;
}

.custom-switch-lg .custom-control-label::after {
    top: calc(.25rem + 3px);
    left: calc(-2.25rem + 4px);
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: 1.5rem;
}

.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(1.4rem);
}

.custom-switch-lg .custom-control-label::before {
    height: 1.5rem;
}

.custom-switch-lg .custom-control-label {
    padding-left: 1.5rem;
    line-height: 1.7rem;
}

/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
body {
    min-height: 100vh;
    background: #121618;
}