Bootstrap 5 pricing table by Editorial Staff Output View Horizontal Vertical HTML CSS JS Tidy <section class="section" id="pricing"> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="title-box text-center"> <h3 class="title-heading mt-4">Our Pricing package </h3> <p class="text-muted f-17 mt-3">Started with starter pakage, in this pakage you get 1 user account and 50 plus video tutorials in web devlopment.</p> <img src="images/home-border.png" height="15" class="mt-3" alt=""> </div> </div> </div> <div class="row mt-5 pt-4"> <div class="col-lg-4"> <div class="pricing-box mt-4"> <h4 class="f-20">Starter</h4> <div class="mt-4 pt-2"> <p class="mb-2 f-18">Features</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>Unlimited</b> Target Audience</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>1</b> User Account</p> <p class="mb-2"><i class="mdi mdi-close-circle text-danger f-18 mr-2"></i><b>50+</b> Video Tuts</p> <p class="mb-2"><i class="mdi mdi-close-circle text-danger f-18 mr-2"></i><b>Public</b> Displays </p> </div> <div class="pricing-plan mt-4 pt-2"> <h4 class="text-muted"><s> $5.99</s> <span class="plan pl-3 text-dark">$3.99 </span></h4> <p class="text-muted mb-0">Per Month</p> </div> <div class="mt-4 pt-3"> <a href="" class="btn btn-primary btn-rounded">Purchase Now</a> </div> </div> </div> <div class="col-lg-4"> <div class="pricing-box mt-4"> <div class="pricing-badge"> <span class="badge">Featured</span> </div> <h4 class="f-20 text-primary">Personal</h4> <div class="mt-4 pt-2"> <p class="mb-2 f-18">Features</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>Unlimited</b> Target Audience</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>1</b> User Account</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>100+</b> Video Tuts</p> <p class="mb-2"><i class="mdi mdi-close-circle text-danger f-18 mr-2"></i><b>Public</b> Displays </p> </div> <div class="pricing-plan mt-4 pt-2"> <h4 class="text-muted"><s> $9.99</s> <span class="plan pl-3 text-dark">$5.99 </span></h4> <p class="text-muted mb-0">Per Month</p> </div> <div class="mt-4 pt-3"> <a href="" class="btn btn-primary btn-rounded">Purchase Now</a> </div> </div> </div> <div class="col-lg-4"> <div class="pricing-box mt-4"> <h4 class="f-20">Ultimate</h4> <div class="mt-4 pt-2"> <p class="mb-2 f-18">Features</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>Unlimited</b> Target Audience</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>1</b> User Account</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>100+</b> Video Tuts</p> <p class="mb-2"><i class="mdi mdi-checkbox-marked-circle text-success f-18 mr-2"></i><b>Public</b> Displays </p> </div> <div class="pricing-plan mt-4 pt-2"> <h4 class="text-muted"><s> $15.99</s> <span class="plan pl-3 text-dark">$9.99 </span></h4> <p class="text-muted mb-0">Per Month</p> </div> <div class="mt-4 pt-3"> <a href="" class="btn btn-primary btn-rounded">Purchase Now</a> </div> </div> </div> </div> </div> </section> HTML CSS JS Tidy body{margin-top:20px;} .pricing-box { -webkit-box-shadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 30px -10px rgba(0, 0, 0, 0.1); padding: 35px 50px; border-radius: 20px; position: relative; } .pricing-box .plan { font-size: 34px; } .pricing-badge { position: absolute; top: 0; z-index: 999; right: 0; width: 100%; display: block; font-size: 15px; padding: 0; overflow: hidden; height: 100px; } .pricing-badge .badge { float: right; -webkit-transform: rotate(45deg); transform: rotate(45deg); right: -67px; top: 17px; position: relative; text-align: center; width: 200px; font-size: 13px; margin: 0; padding: 7px 10px; font-weight: 500; color: #ffffff; background: #fb7179; } .mb-2, .my-2 { margin-bottom: .5rem!important; } p { line-height: 1.7; } HTML CSS JS Tidy >_Console Clear Console >_Console File Setting HTML Code Playground Setting Title Description Bootstrap 5 pricing table component. Clean and responsive Bootstrap 5 pricing table code snippet. Catagory Bootstrap Tags Bootstrap5 Resource Add External Stylesheets and Script <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.bundle.min.js"></script>
