How to Create a Pricing Table in Bootstrap?
Last Updated :
07 May, 2024
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.
Approach
- First, 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/bootstrap@5.3.0-alpha1/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/bootstrap@5.3.0-alpha1/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
Share your thoughts in the comments
Please Login to comment...