How to Create a Pricing Table in Bootstrap? Last Updated : 07 May, 2024 Comments Improve Suggest changes Like Article Like Report Pricing tables are essential for showcasing different pricing plans or subscription options for products or services to the user. With the help of the pricing tables plans users can avail their plans accordingly. We will focus on the steps to create a pricing table in Bootstrap. ApproachFirst, create a basic HTML structure and then add the Bootstrap 5 CDN links to style the pricing table, ensuring consistent styling across different devices and browsers.Within the <body> tag, a container div centers the content horizontally, and the "bg-success" class is applied to set the background color.Inside the container, three pricing cards are created using the Bootstrap grid system, each contained within a column div with the class "col-md-4".Each pricing card contains a card title, subtitle, list of features, and a sign-up button, styled using Bootstrap's card and button classes.Example: This example shows how to create a Pricing Table in Bootstrap. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pricing Table</title> <link href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="bg-success"> <div class="container"> <div class="row justify-content-center"> <h1 class="text-center mt-5 text-light"> Welcome to Pricing Table in Bootstrap </h1> </div> <div class="row pricing-table mt-5"> <div class="col-md-4"> <div class="card border-0 shadow-sm rounded" style="width: 350px; height: 450px;"> <div class="card-body text-center"> <h5 class="card-title text-primary"> Basic Plan </h5> <h6 class="card-subtitle mb-2 text-muted"> Free </h6> <ul class="list-group list-group-flush"> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 10 GB Storage </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> Priority Support </li> <li class="list-group-item text-danger border-0"> <i class="fas fa-times-circle"></i> Limited Features </li> <li class="list-group-item border-0"> <i class="fas fa-users"></i> Community Forum Access </li> <li class="list-group-item border-0"> <i class="fas fa-star"></i> Exclusive Offers </li> <li class="list-group-item border-0"> <i class="fas fa-star"></i> Custom Themes </li> <li class="list-group-item text-danger border-0"> <i class="fas fa-times-circle"></i> Weekly Backups </li> <li class="list-group-item text-danger border-0"> <i class="fas fa-cross-circle"></i> 24/7 Live Chat Support </li> </ul> <a href="#" class="btn btn-primary mt-3 w-50"> Sign Up </a> </div> </div> </div> <div class="col-md-4"> <div class="card border-0 shadow-sm rounded" style="width: 350px; height: 450px;"> <div class="card-body text-center"> <h5 class="card-title text-warning"> Standard Plan </h5> <h6 class="card-subtitle mb-2 text-muted"> $10/month </h6> <ul class="list-group list-group-flush"> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 100 GB Storage </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> Priority Support </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> Full Features </li> <li class="list-group-item border-0"> <i class="fas fa-users"></i> Community Forum Access </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 30-Day Money-Back Guarantee </li> <li class="list-group-item text-warning border-0"> <i class="fas fa-check-circle"></i> 1 Email Account </li> <li class="list-group-item text-danger border-0"> <i class="fas fa-cross-circle"></i> Weekly Backups </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 24/7 Live Chat Support </li> </ul> <a href="#" class="btn btn-primary mt-3 w-50"> Sign Up </a> </div> </div> </div> <div class="col-md-4"> <div class="card border-0 shadow-sm rounded" style="width: 350px; height: 450px;"> <div class="card-body text-center"> <h5 class="card-title text-info"> Premium Plan </h5> <h6 class="card-subtitle mb-2 text-muted"> $100/month </h6> <ul class="list-group list-group-flush"> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 1000 GB Storage </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> Priority Support </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> Full Features </li> <li class="list-group-item border-0"> <i class="fas fa-users"></i> Community Forum Access </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 30-Day Money-Back Guarantee </li> <li class="list-group-item text-warning border-0"> <i class="fas fa-check-circle"></i> 3 Email Account </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> Weekly Backups </li> <li class="list-group-item text-success border-0"> <i class="fas fa-check-circle"></i> 24/7 Live Chat Support </li> </ul> <a href="#" class="btn btn-primary mt-3 w-50"> Sign Up </a> </div> </div> </div> </div> </div> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"> </script> </body> </html> Output: Output Comment More infoAdvertise with us Next Article How to Create a Pricing Table in Bootstrap? S skaftafh Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-Questions Similar Reads How to create a rounded table in Bootstrap 5? Bootstrap 5 provides various classes that can be used for styling the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create a rounded table in Bootstrap 5. Here we use two differen 2 min read How to Create a Responsive Table in Bootstrap ? A responsive table in Bootstrap adjusts its layout to fit different screen sizes, ensuring readability and usability on all devices. It typically involves using classes like .table-responsive or custom CSS to enable horizontal scrolling on smaller screens.Table of Content Using the table-responsive 4 min read How to create Hoverable Table Rows in Bootstrap 5 ? This feature is particularly useful in web applications, dashboards, or scenarios where tabular data is presented, improving the overall user experience and interface. To achieve the effect of hoverable table rows we use the bootstrap class "table-hover" in the <table> tag. This effect enhance 2 min read How to Create a Pricing Table in WordPress? Creating a pricing table in WordPress can help you display your product or service prices clearly. This can make it easier for visitors to compare options and make a purchase. Here’s a simple guide to help you create a pricing table in WordPress.These are the following approaches to create a Pricing 4 min read How to create a web page using Bootstrap ? Bootstrap is an open-source CSS framework for creating a responsive and customizable frontend for websites and web applications. Using Bootstrap's grid system one can easily create a web page very fast. Any webpage these days needs to have a navbar for user navigation, some content & a form for 6 min read Like