Bootstrap Toggle Switches:

Bootstrap Switch Button in Pay Card of Products

Many websites provide a service or sell a product to customers, and they need a page for payment. If you like to use this kind of bootstrap for your website, it is better to choose a beautiful one to attract more audiences. The Bootstrap Switch Button in Pay Card of Products has the mentioned function that we said. This Free Bootstrap Switch allows users to move to the payment page quickly. As the following CSS Toggle Switch has a colorful theme, you can attract people’s attention quickly.

As the preview of this Simple Toggle Switch Code represents, the main page is placed on a purple background. The central page has a white background, and there is an activation button on the right side of that. This section is white, and it changes to blue as you select. The writing of this Pay Card Switch Button is black, and there are two spaces on the left side. After filling in the blanks, you can complete payment by choosing the “PAY NOW” option in blue color. If you want to cancel paying, you need to select the “CANCEL” button with red color. After you click on these parts, a border appears, and you move to its related page.

Free Bootstrap Switch

Pay Card Switch Button

CSS Toggle Switch

Simple Toggle Switch Code

<!-- This script got from 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://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 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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS