5.7K
Responsive bootstrap pricing table
I am hoping this pricing table is perfect for your project. In this tutorial, I am going to make a responsive bootstrap pricing table. It is perfectly responsive and compatible with any device.
First, you have to add bootstrap CDN before closing the head tag then add a bootstrap framework such as row and cols according to your desire to make a pricing table.
HTML
<!DOCTYPE html> <html> <head> <title>Responsive bootstrap pricing table</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <head></head> <body> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="pricingTable"> <div class="pricingTable-header"> <h3 class="title">Standard</h3> </div> <div class="pricing-content"> <div class="price-value"> <span class="amount">$14.</span> <span class="amount-sm">99</span> <span class="duration">month</span> </div> <ul> <li>20GB Disk Space</li> <li>20 Email Accounts</li> <li>50GB Bandwidth</li> <li>Maintenance</li> <li>5 Subdomains</li> </ul> <div class="pricingTable-signup"> <a href="#">Sign Up</a> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable blue"> <div class="pricingTable-header"> <h3 class="title">Business</h3> </div> <div class="pricing-content"> <div class="price-value"> <span class="amount">$24.</span> <span class="amount-sm">99</span> <span class="duration">month</span> </div> <ul> <li>50GB Disk Space</li> <li>50 Email Accounts</li> <li>50GB Bandwidth</li> <li>Maintenance</li> <li>15 Subdomains</li> </ul> <div class="pricingTable-signup"> <a href="#">Sign Up</a> </div> </div> </div> </div> <div class="col-md-4 col-sm-6"> <div class="pricingTable orange"> <div class="pricingTable-header"> <h3 class="title">Premium</h3> </div> <div class="pricing-content"> <div class="price-value"> <span class="amount">$39.</span> <span class="amount-sm">99</span> <span class="duration">month</span> </div> <ul> <li>100GB Disk Space</li> <li>100 Email Accounts</li> <li>100GB Bandwidth</li> <li>Maintenance</li> <li>Unlimited Subdomains</li> </ul> <div class="pricingTable-signup"> <a href="#">Sign Up</a> </div> </div> </div> </div> </div> </div> </div> </body> </html>
CSS
body{ background: cadetblue; margin-top: 80px; } .pricingTable{ background: #FF2A5E; font-family: 'Poppins', sans-serif; text-align: center; padding: 0 0 55px; margin: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border-radius: 25px; } .pricingTable .pricingTable-header{ padding: 20px 10px; } .pricingTable .title{ color: #fff; font-size: 36px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin: 0; } .pricingTable .pricing-content{ background-color: #fff; width: 85%; margin: 0 0 0 -10px; box-shadow: 7px 7px 1px rgba(0,0,0,0.2); border-radius: 0 20px 20px 20px; position: relative; } .pricingTable .pricing-content:before{ content: ""; background: linear-gradient(to top left,#888 49%, transparent 50%); width: 10px; height: 10px; position: absolute; top: -10px; left: 0; } .pricingTable .price-value{ color: #494949; background: #efefef; padding: 25px 0 20px; border-radius: 0 20px 0 0; border-bottom: 3px solid #d2d2d2; } .pricingTable .price-value .amount{ font-size: 60px; font-weight: 600; line-height: 60px; } .pricingTable .price-value .amount-sm{ font-size: 35px; font-weight: 600; line-height: 45px; vertical-align: top; } .pricingTable .price-value .duration{ font-size: 15px; font-weight: 500; margin: 0 0 0 -45px; } .pricingTable .pricing-content ul{ padding: 20px; margin: 0; list-style: none; } .pricingTable .pricing-content ul li{ color: #adabab; font-size: 17px; line-height: 30px; text-transform: capitalize; margin: 0 0 10px; border-bottom: 2px solid #d2d2d2; } .pricingTable .pricing-content ul li:last-child{ margin-bottom: 0; } .pricingTable .pricingTable-signup{ padding: 15px 0 40px; } .pricingTable .pricingTable-signup a{ color: #fff; background: #FF2A5E; font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 5px 25px; border-radius: 50px; box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.4); transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover{ box-shadow: none; text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.6); } .pricingTable.blue, .pricingTable.blue .pricingTable-signup a{ background: #00657A; } .pricingTable.orange, .pricingTable.orange .pricingTable-signup a{ background: #e0710f; } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 0 40px 10px; } }