content logo

Bootstrap Toggle Switches:

Red Toggle Switch for Discount with Bootstrap

Using items that match the color theme and appearance of each section will create a better match between the items on your website. In this post, we also have a card to discount a product. There is a switch button inside this card. The color theme of this switch is also red. This switch turns white when selected.

#Discount Toggle Switch

#Red Toggle Switch

#Toggle Button with Effect

#HTML Switch Button Code


<!-- This script got from www.frontendfreecode.com -->
<div class="card">
    <div class="text-center">
        <div class="d-flex flex-row text-center"> <img src="https://i.imgur.com/bIgSEvT.png" width="70">
            <div class="d-flex flex-column ml-1">
                <h1 class="mb-0 percent">20%</h1> <span class="discount">Discount</span>
            </div>
        </div>
    </div>
    <hr class="line"> <span class="text-white">Ultimate discount for all customers across all country on all products at bbbootstrap.com</span>
    <div class="d-flex justify-content-between align-items-center mt-4"> <span class="text-white">Active</span>
        <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background-color: #ff52529c;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}
.card {
    width: 300px;
    border: none;
    height: 320px;
    border-radius: 15px;
    padding: 20px;
    background-color: #D50000
}
.percent {
    font-size: 56px;
    color: #fff
}
.discount {
    font-size: 27px;
    color: #fff
}
.line {
    color: #fff
}
.form-check-input:checked {
    background-color: #F44336;
    border-color: #F44336
}
.form-check-input:focus {
    border-color: #d50000;
    outline: 0;
    box-shadow: none
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75em;
    margin-bottom: -5px
}
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/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-alpha1/dist/css/bootstrap.min.css' rel='stylesheet'>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha1/dist/js/bootstrap.bundle.min.js'></script>
<style>
body {
    background-color: #ff52529c;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center
}
.card {
    width: 300px;
    border: none;
    height: 320px;
    border-radius: 15px;
    padding: 20px;
    background-color: #D50000
}
.percent {
    font-size: 56px;
    color: #fff
}
.discount {
    font-size: 27px;
    color: #fff
}
.line {
    color: #fff
}
.form-check-input:checked {
    background-color: #F44336;
    border-color: #F44336
}
.form-check-input:focus {
    border-color: #d50000;
    outline: 0;
    box-shadow: none
}
.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75em;
    margin-bottom: -5px
}
</style>

</head>
<body>
<div class="card">
    <div class="text-center">
        <div class="d-flex flex-row text-center"> <img src="https://i.imgur.com/bIgSEvT.png" width="70">
            <div class="d-flex flex-column ml-1">
                <h1 class="mb-0 percent">20%</h1> <span class="discount">Discount</span>
            </div>
        </div>
    </div>
    <hr class="line"> <span class="text-white">Ultimate discount for all customers across all country on all products at bbbootstrap.com</span>
    <div class="d-flex justify-content-between align-items-center mt-4"> <span class="text-white">Active</span>
        <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> </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