content logo

Bootstrap Toggle Switches:

Bootstrap Switch Button in Pay Card of Products

On the page where the cost of each product is written and you want to be transferred to the payment gateway by clicking on a button, you can use the switches to select your product more accurately and customized. In this post, we also have a blue switch on the product page. This switch turns white when disabled.

#Free Bootstrap Switch

#Pay Card Switch Button

#CSS Toggle Switch

#Simple Toggle Switch Code


<!-- This script got from www.frontendfreecode.com -->
<div class="container">
    <div class="center">
        <div class="card p-3 py-4">
            <div class="d-flex justify-content-between align-items-center"> <img class="mt-1" src="https://i.imgur.com/GMlBPL4.png">
                <div>
                    <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> </div>
                </div>
            </div>
            <div class="mt-2">
                <h6 class="mb-0">Adobe Create cloud</h6> <span class="fs-2 fw-bold">₹ 2,456.00</span>
            </div>
            <div class="mt-3">
                <div class="d-flex flex-row"> <img src="https://i.imgur.com/EYFtR83.jpg" class="rounded-circle" width="50">
                    <div class="d-flex flex-column ms-2"> <span class="fs-6 text-blue-700">Name and Family</span>
                        <div class="d-flex flex-row align-items-center">
                            <div class="dots"> <span></span> <span></span> <span></span> <span></span> </div> <span class="fw-bold ms-1">4594</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-4 d-flex flex-row gap-2"> <button class="btn btn-primary w-100 h-45 text-uppercase">Pay Now</button> <button class="btn btn-danger w-100 h-45 text-uppercase">Cancel</button> </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background-color: #6A1B9A
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh
}
.card {
    width: 400px;
    border: none
}
.dots {
    display: flex;
    flex-direction: row
}
.dots span {
    display: flex;
    margin-right: 2px;
    height: 5px;
    width: 5px;
    background-color: #000;
    border-radius: 50%
}
.h-45 {
    height: 45px;
    font-size: 14px
}
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js'></script>
<style>
body {
    background-color: #6A1B9A
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh
}
.card {
    width: 400px;
    border: none
}
.dots {
    display: flex;
    flex-direction: row
}
.dots span {
    display: flex;
    margin-right: 2px;
    height: 5px;
    width: 5px;
    background-color: #000;
    border-radius: 50%
}
.h-45 {
    height: 45px;
    font-size: 14px
}
</style>

</head>
<body>
<div class="container">
    <div class="center">
        <div class="card p-3 py-4">
            <div class="d-flex justify-content-between align-items-center"> <img class="mt-1" src="https://i.imgur.com/GMlBPL4.png">
                <div>
                    <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> </div>
                </div>
            </div>
            <div class="mt-2">
                <h6 class="mb-0">Adobe Create cloud</h6> <span class="fs-2 fw-bold">₹ 2,456.00</span>
            </div>
            <div class="mt-3">
                <div class="d-flex flex-row"> <img src="https://i.imgur.com/EYFtR83.jpg" class="rounded-circle" width="50">
                    <div class="d-flex flex-column ms-2"> <span class="fs-6 text-blue-700">Name and Family</span>
                        <div class="d-flex flex-row align-items-center">
                            <div class="dots"> <span></span> <span></span> <span></span> <span></span> </div> <span class="fw-bold ms-1">4594</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-4 d-flex flex-row gap-2"> <button class="btn btn-primary w-100 h-45 text-uppercase">Pay Now</button> <button class="btn btn-danger w-100 h-45 text-uppercase">Cancel</button> </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview