Bootstrap 5 discount coupon card by Nitin Kumar Output View Horizontal Vertical HTML CSS JS Tidy <div class="card"> <div class="text-center"> <div class="d-flex flex-row text-center"> <svg width="80px" height="80px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M960.1 258.4H245.8l-36.1-169H63.9v44h110.2l26.7 125 100.3 469.9 530 0.4v-44l-494.4-0.3-22.6-105.9H832l128.1-320.1z m-65 44L855.6 401H276.3l-21.1-98.6h639.9zM304.8 534.5L279.7 417h569.5l-47 117.5H304.8z" fill="#ffffff" /> <path d="M375.6 810.6c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52m0-20c-39.7 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.3-72-72-72zM732 810.6c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52m0-20c-39.7 0-72 32.2-72 72s32.2 72 72 72c39.7 0 72-32.2 72-72s-32.3-72-72-72zM447.5 302.4h16v232.1h-16zM652 302.4h16v232.1h-16z" fill="#ffffff" /> <path d="M276.3 401l3.4 16-3.4-16z" fill="#343535" /> </svg> <div class="d-flex flex-column ml-1"> <h1 class="mb-0 percent">40%</h1> <span class="discount">Discount</span> </div> </div> </div> <hr class="line"> <span class="text-white">Mega discount for all customers across all products at mystore.com, Use Coupons Cose "extra40"</span> <div class="d-flex justify-content-between align-items-center mt-4"> <span class="text-white">Use Code</span> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> </div> </div> </div> HTML CSS JS Tidy body{ background-color:#fff; height: 100vh; display: flex; justify-content: center; align-items: center; } .card{ width: 300px; border:none; height: 320px; border-radius: 15px; padding: 20px; background-color: #d58900; } .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; } HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Bootstrap 5 discount coupon card Component with toggle button. Catagory Bootstrap Tags Bootstrap5 Card Discount Resource Add External Stylesheets and Script <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" /> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"> </script>
