Offering discounts and coupons to your customers can be a great way to boost sales and attract more business. Bootstrap 5, the popular front-end framework, makes it easier than ever to create a stylish and functional discount coupon feature on your website.
In this blog post, we’ll walk you through the step-by-step process of creating a discount coupon with a toggle button using Bootstrap 5.
Step 1: Discount Card with Toggle Switch in HTML
HTML code gives a visually appealing discount card. It features a 50% discount displayed prominently along with a brief description of an unprecedented global discount at “webb.com” for all products, customers, and countries.
There’s a toggle switch at the bottom to activate or deactivate the discount offer. The card’s structure includes an image, text, and a switch. Example code:
<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">50%</h1> <span class="discount">Discount</span> </div> </div> </div> <hr class="line"> <span class="text-white">Unprecedented Global Discount at webb.com: All Products, All Customers, All Countries</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>
Step 2:Discount Card and Form Check Styling
This CSS code styles a centered discount card on a webpage with a background color, card dimensions, font styles, and customizations for a form check input, including its checked and focused states.
body{
background-color:#885b4661;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.card{
width: 300px;
border:none;
height: 320px;
border-radius: 15px;
padding: 20px;
background-color: #51B3A08A;
}
.percent{
font-size: 56px;
color: #fff;
}
.discount{
font-size: 27px;
color: #fff;
}
.line{
color: #fff;
}
.form-check-input:checked {
background-color: #3C3737;
border-color: #1E1B1B;
}
.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;
}Step 3: CDNs
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
Bootstrap 5 Discount Coupon Toggle Demo
Creating a discount coupon feature with a toggle button using Bootstrap 5 is a straightforward process. By following these simple steps, you can enhance your website’s functionality and provide a user-friendly way for customers to apply discounts, ultimately boosting your sales and customer satisfaction.