Creating a Bootstrap 5 Discount Coupon Toggle: Code Included

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 “” 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="" width="70">

<div class="d-flex flex-column ml-1">

<h1 class="mb-0 percent">50%</h1>
<span class="discount">Discount</span>



<hr class="line">

<span class="text-white">Unprecedented Global Discount at 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>




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.


height: 100vh;
display: flex;
justify-content: center;
align-items: center;


width: 300px;
height: 320px;
border-radius: 15px;
padding: 20px;
background-color: #51B3A08A;


font-size: 56px;
color: #fff;


font-size: 27px;
color: #fff;


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[email protected]/dist/css/bootstrap.min.css[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.

You Might Be Interested In:

Ashfaq Ahmed is a freelance WordPress developer and owner of I developed modern and highly interactive websites. I always focus on improving my development and design skills.

Leave a Comment