Pricing Table Design Bootstrap 5
Pricing table play important role for any company website to display our products or services. The Pricing table must be simple but clearly differentiate between prices and features of different products and services.
Read also: Bootstrap Video card
Your Pricing table is the most important pages of your company website, it is worth optimizing your pricing page for conversions, because this is one of the places where you can show your services and product along with different prices.
In this article, I will explain how to create Pricing Table Design Bootstrap 5. I am using Bootstrap 5 for card designing and fontawesome for icon.
Before starting the coding part first we have to add the following library in the header section which is easily available in internet.
Demo and Source code link is available at the bottom section
Read Also:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
The HTML Code
The following HTML code is used to design the simple structure for Pricing table.
<div class="pricing-card">
<div class="pricing-card_header">
<h3 class="text-center">Basic</h3>
<h1 class="text-center">$0<small>/mo</small></h1>
</div>
<div class="pricing-card_content">
<ul>
<li><i class="fa fa-check"></i> Single User</li>
<li><i class="fa fa-check"></i> 10GB Storage</li>
<li><i class="fa fa-check"></i> Unlimited Public Projects</li>
<li><i class="fa fa-check"></i> Community Access</li>
<li class="txt-color"><i class="fas fa-times"></i> Email support</li>
<li class="txt-color"><i class="fas fa-times"></i> 24/7 Support</li>
<li class="txt-color"><i class="fas fa-times"></i> Premium support</li>
<li class="txt-color"><i class="fas fa-times"></i> Free Subdomain</li>
<li class="txt-color"><i class="fas fa-times"></i> Advanced security</li>
<li class="txt-color"><i class="fas fa-times"></i> Invoice & billing</li>
<li class="txt-color"><i class="fas fa-times"></i> Unlimited Private Projects</li>
</ul>
</div>
<div class="pricing-card_footer text-center"> <a href="#" class="btn btn-primary btn-lg btn-block">Start with Basic</a> </div>
</div>Read Also: FAQ Section
The CSS Style
The following CSS is used to design the Pricing table card.
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400&display=swap');
body {
font-family: 'Dosis', sans-serif;
background: #faf7f4;
}
.txt-color {
color: #979797;
}
.txt-color-2 {
color: #cbcbcb;
}
.section-100 {
padding-top: 100px;
padding-bottom: 100px;
}
.main-pricing-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.pricing-card {
background: #fff;
padding: 30px 30px 110px 30px;
margin-bottom: 30px;
border-radius: 5px;
max-width: 400px;
width: 100%;
position: relative;
box-shadow: 2px 5px 30px -5px rgba(0, 0, 0, 0.16);
}
@media (min-width: 993px) {
.pricing-card {
width: 33.33%;
padding: 50px 50px 110px 50px;
}
}
.pricing-card.pricing-card--annual {
background: #56CCF2; /* fallback for old browsers */
background: -webkit-linear-gradient(to top, #2F80ED, #56CCF2); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #2F80ED, #56CCF2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #fff;
transform: scale(1.05);
z-index: 1;
}
.pricing-card.pricing-card--annual:hover {
-webkit-transform: scale3d(1.2, 1.2, 1) translateZ(0) perspective(500px);
transform: scale3d(1.2, 1.2, 1) translateZ(0) perspective(500px);
-webkit-transition: -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
transition: -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
transition: transform .25s cubic-bezier(.33, .04, .63, .93);
transition: transform .25s cubic-bezier(.33, .04, .63, .93), -webkit-transform .25s cubic-bezier(.33, .04, .63, .93);
-webkit-transition-delay: .4s;
transition-delay: .4s;
}
.pricing-card.pricing-card--annual .btn-primary {
background-color: #faf7f4;
border-color: #faf7f4;
color: #333;
}
.pricing-card.pricing-card--annual .btn-primary:hover {
background-color: #f2eae2;
border-color: #f2eae2;
}
.pricing-card .pricing-card_header h1 {
margin-bottom: 35px;
font-weight: 500 !important;
}
.pricing-card .pricing-card_header h1 small {
font-size: 16px;
}
.pricing-card .pricing-card_content ul {
list-style-type: none;
padding-left: 0;
}
.pricing-card .pricing-card_content ul li {
font-size: 17px;
margin-bottom: 5px;
}
.pricing-card .pricing-card_content ul li i {
margin-right: 5px;
}
.pricing-card .pricing-card_footer {
position: absolute;
width: 100%;
padding: 30px;
bottom: 0;
left: 0;
}
@media (min-width: 993px) {
.pricing-card .pricing-card_footer {
padding: 30px 50px;
}
}
.btn {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}
.btn.btn-primary {
background-color: #368eed;
border-color: #3790ee;
}
.btn.btn-primary:hover {
background-color: #4cbaf0;
border-color: #4cbaf0;
}Full HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pricing Card UI Design</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section class="section-100">
<div class="container">
<h1 class="text-center">Pricing Cards Bootstrap</h1>
<br>
<br>
<br>
<div class="main-pricing-container">
<div class="pricing-card">
<div class="pricing-card_header">
<h3 class="text-center">Basic</h3>
<h1 class="text-center">$0<small>/mo</small></h1>
</div>
<div class="pricing-card_content">
<ul>
<li><i class="fa fa-check"></i> Single User</li>
<li><i class="fa fa-check"></i> 10GB Storage</li>
<li><i class="fa fa-check"></i> Unlimited Public Projects</li>
<li><i class="fa fa-check"></i> Community Access</li>
<li class="txt-color"><i class="fas fa-times"></i> Email support</li>
<li class="txt-color"><i class="fas fa-times"></i> 24/7 Support</li>
<li class="txt-color"><i class="fas fa-times"></i> Premium support</li>
<li class="txt-color"><i class="fas fa-times"></i> Free Subdomain</li>
<li class="txt-color"><i class="fas fa-times"></i> Advanced security</li>
<li class="txt-color"><i class="fas fa-times"></i> Invoice & billing</li>
<li class="txt-color"><i class="fas fa-times"></i> Unlimited Private Projects</li>
</ul>
</div>
<div class="pricing-card_footer text-center"> <a href="#" class="btn btn-primary btn-lg btn-block">Start with Basic</a> </div>
</div>
<div class="pricing-card pricing-card--annual">
<div class="pricing-card_header">
<h3 class="text-center">Standard</h3>
<h1 class="text-center">$75<small>/mo</small></h1>
</div>
<div class="pricing-card_content">
<ul>
<li><i class="fa fa-check"></i> Single User</li>
<li><i class="fa fa-check"></i> 10GB Storage</li>
<li><i class="fa fa-check"></i> Unlimited Public Projects</li>
<li><i class="fa fa-check"></i> Community Access</li>
<li><i class="fa fa-check"></i> Email support</li>
<li><i class="fa fa-check"></i> 24/7 Support</li>
<li><i class="fa fa-check"></i> Premium support</li>
<li class="txt-color-2"><i class="fas fa-times"></i> Free Subdomain</li>
<li class="txt-color-2"><i class="fas fa-times"></i> Advanced security</li>
<li class="txt-color-2"><i class="fas fa-times"></i> Invoice & billing</li>
<li class="txt-color-2"><i class="fas fa-times"></i> Unlimited Private Projects</li>
</ul>
</div>
<div class="pricing-card_footer text-center"> <a href="#" class="btn btn-primary btn-lg btn-block">Choose plan</a> </div>
</div>
<div class="pricing-card">
<div class="pricing-card_header">
<h3 class="text-center">Premium</h3>
<h1 class="text-center">$155<small>/mo</small></h1>
</div>
<div class="pricing-card_content">
<ul>
<li><i class="fa fa-check"></i> Single User</li>
<li><i class="fa fa-check"></i> 10GB Storage</li>
<li><i class="fa fa-check"></i> Unlimited Public Projects</li>
<li><i class="fa fa-check"></i> Community Access</li>
<li><i class="fa fa-check"></i> Email support</li>
<li><i class="fa fa-check"></i> 24/7 Support</li>
<li><i class="fa fa-check"></i> Premium support</li>
<li><i class="fa fa-check"></i> Free Subdomain</li>
<li><i class="fa fa-check"></i> Advanced security</li>
<li><i class="fa fa-check"></i> Invoice & billing</li>
<li><i class="fa fa-check"></i> Unlimited Private Projects</li>
</ul>
</div>
<div class="pricing-card_footer text-center"> <a href="#" class="btn btn-primary btn-lg btn-block">Choose plan</a> </div>
</div>
</div>
</div>
</section>
</body>
</html>Hope this article will help you to design the Pricing Table Design Bootstrap 5.
Download Source of Pricing Table Design Here
Share this:
Related Post
