"pricing table"
Bootstrap 3.0.0 Snippet by Glgcoder

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <section class="pricing" id="pricing"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="pricing-table"> <div class="pricing-header"> <div class="pt-price">$9.99<small>/m</small></div> <div class="pt-name">Standard</div> </div> <div class="pricing-body"> <ul> <li><i class="fa fa-check"></i> 2GB Space</li> <li><i class="fa fa-check"></i> 10GB Bandwidth</li> <li><i class="fa fa-check"></i> Free Domain</li> <li><i class="fa fa-times"></i> Free Email</li> <li><i class="fa fa-times"></i> Free cPanel</li> <li><i class="fa fa-times"></i> Free FTP</li> <li><i class="fa fa-times"></i> Free Support</li> </ul> </div> <div class="pricing-footer"> <a href="#" class="btn btn-default">Purchase</a> </div> </div> </div> <div class="col-md-3"> <div class="pricing-table"> <div class="pricing-header"> <div class="pt-price">$19.99<small>/m</small></div> <div class="pt-name">Premium</div> </div> <div class="pricing-body"> <ul> <li><i class="fa fa-check"></i> 5GB Space</li> <li><i class="fa fa-check"></i> 50GB Bandwidth</li> <li><i class="fa fa-check"></i> Free Domain</li> <li><i class="fa fa-check"></i> Free Email</li> <li><i class="fa fa-times"></i> Free cPanel</li> <li><i class="fa fa-times"></i> Free FTP</li> <li><i class="fa fa-times"></i> Free Support</li> </ul> </div> <div class="pricing-footer"> <a href="#" class="btn btn-default">Purchase</a> </div> </div> </div> <div class="col-md-3"> <div class="pricing-table featured"> <div class="pricing-header"> <div class="pt-price">$49.99<small>/m</small></div> <div class="pt-name">Developer</div> <div class="featured-text">Best Value</div> </div> <div class="pricing-body"> <ul> <li><i class="fa fa-check"></i> 20GB Space</li> <li><i class="fa fa-check"></i> 1TB Bandwidth</li> <li><i class="fa fa-check"></i> Free Domain</li> <li><i class="fa fa-check"></i> Free Email</li> <li><i class="fa fa-check"></i> Free cPanel</li> <li><i class="fa fa-check"></i> Free FTP</li> <li><i class="fa fa-times"></i> Free Support</li> </ul> </div> <div class="pricing-footer"> <a href="#" class="btn btn-main">Purchase</a> </div> </div> </div> <div class="col-md-3"> <div class="pricing-table"> <div class="pricing-header"> <div class="pt-price">$99.99<small>/m</small></div> <div class="pt-name">Enterprise</div> </div> <div class="pricing-body"> <ul> <li><i class="fa fa-check"></i> Unlimited Space</li> <li><i class="fa fa-check"></i> Unlimited Bandwidth</li> <li><i class="fa fa-check"></i> Free Domain</li> <li><i class="fa fa-check"></i> Free Email</li> <li><i class="fa fa-check"></i> Free cPanel</li> <li><i class="fa fa-check"></i> Free FTP</li> <li><i class="fa fa-check"></i> Free Support</li> </ul> </div> <div class="pricing-footer"> <a href="#" class="btn btn-default">Purchase</a> </div> </div> </div> </div> </div> </section>
.pricing { padding: 100px 0; } .pricing-table { border: 1px solid #f2f2f2; border-radius: 5px; background-color: #fff; } .pricing-table .pricing-header .pt-price { font-family: "Oswald"; color: #4c4c4c; font-size: 40px; line-height: 70px; font-weight: 400; text-align: center; padding: 10px 40px; } .pricing-table .pricing-header .pt-price small { font-size: 13px; color: #9a9a9a; font-weight: 300; } .pricing-table .pricing-header .pt-name { font-family: "Oswald"; padding: 10px 40px; text-align: center; font-weight: 300; font-size: 24px; line-height: 40px; color: #4c4c4c; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; } .pricing-table .pricing-body ul { margin: 0; padding: 0; list-style: none; } .pricing-table .pricing-body ul li { padding: 8px 25px; margin: 0; } .pricing-table .pricing-body ul li:nth-child(even) { background-color: #fafafa; } .pricing-table .pricing-body ul li .fa-times { color: #ff6666; } .pricing-table .pricing-body ul li .fa-check { color: #4ecdc4; } .pricing-table .pricing-footer { text-align: center; padding: 15px 40px; border-top: 1px solid #f2f2f2; } .pricing-table.featured .pricing-header { position: relative; overflow: hidden; } .pricing-table.featured .pricing-header .pt-price { color: #4ecdc4; } .pricing-table.featured .pricing-header .pt-price small { color: #4ecdc4; } .pricing-table.featured .pricing-header .pt-name { color: #4ecdc4; } .pricing-table.featured .pricing-header .featured-text { font-family: "Oswald"; font-size: 13px; line-height: 15px; letter-spacing: 1px; font-weight: 300; text-transform: uppercase; text-align: center; background-color: #4ecdc4; color: #fff; position: absolute; top: 22px; left: -28px; padding: 5px 0; width: 126px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .btn-default { color: #676767; border-color: #e5e5e5; } .btn-default:hover { color: #fff; background-color: #4ecdc4; border-color: #4ecdc4; } .btn { font-family: "Oswald"; font-size: 16px; letter-spacing: 1px; border-radius: 40px; padding: 8px 30px; margin-bottom: 5px; -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s; transition: color 0.3s, background-color 0.3s, border-color 0.3s; } .btn-main { color: #fff; background-color: #4ecdc4; border-color: #4ecdc4; } .btn-main:hover, .btn-main:focus, .btn-main:active { background-color: #33b5ac; border-color: #33b5ac; color: #fff; }

Related: See More

BLK• Design System
BS4 Simple & Clean Pricing table
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments: