content logo

Bootstrap Toggle Switches:

Red Toggle Switch for Discount with Bootstrap

If you have an online shop and establish a website, look at this post and use the following code. This bootstrap helps you to display the discounts on your website beautifully. The Red Toggle Switch for Discount with Bootstrap is the best choice to be successful in this field. This Discount Toggle Switch allows you to represent all prices of your products. The following Red Toggle Switch has an attractive design that attracts anyone’s attention. If you use this code to discount your prices, many people like it and purchase your product.

This code has a red theme, and the writings are white. The discount amount is presented with a larger font in this HTML Switch Button Code. There is a light line under this price. You can see a detailed part under this line with a smaller font size. The product’s picture is placed on the top-left side of the page. If you want to activate this discount, you can choose its button on the right side of the code. This part has a red background with a white button. This background changes to white, and the button turns blue as you click on this Toggle Button with Effect.

#

Discount Toggle Switch

#

Red Toggle Switch

#

Toggle Button with Effect

#

HTML Switch Button Code

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