"Simple Pricing Table"
Bootstrap 3.3.0 Snippet by mehedi2014

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>This is title</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--Apple touch icon--> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <!--Google fonts--> <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i|Roboto+Slab:100,300,400,700" rel="stylesheet"> <!--Bootstrap CSS CDN--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--Font Awesome CSS CDN--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--Theme Stylesheet--> <link rel="stylesheet" href="style.css"> </head> <body> <section class="section-padding"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="section-title"> <h2>Pricing <span>Plans</span></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid in ullam labore optio temporibus ex recusandae minima et ipsa aliquam!</p> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Starter</h3> <div class="pricing-icon"> <i class="fa fa-bullhorn"></i> </div> <div class="pricing-list"> <ul> <li>1GB web Space</li> <li>5+ Mysql Database</li> <li class="off">Managed CMS</li> <li>Unlimited Bandwidth</li> <li>Other features</li> </ul> </div> <h3 class="pricing-count">$30/mo</h3> <a href="" class="bordered-btn">Order Now</a> </div> </div> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Personal</h3> <div class="pricing-icon"> <i class="fa fa-user-secret"></i> </div> <div class="pricing-list"> <ul> <li>2GB web Space</li> <li>10+ Mysql Database</li> <li class="off">Managed CMS</li> <li>Unlimited Bandwidth</li> <li>Other features</li> </ul> </div> <h3 class="pricing-count">$50/mo</h3> <a href="" class="bordered-btn">Order Now</a> </div> </div> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Professional</h3> <div class="pricing-icon"> <i class="fa fa-star"></i> </div> <div class="pricing-list"> <ul> <li>5GB web Space</li> <li>15+ Mysql Database</li> <li>Managed CMS</li> <li>Unlimited Bandwidth</li> <li>Other features</li> </ul> </div> <h3 class="pricing-count">$65/mo</h3> <a href="" class="bordered-btn">Order Now</a> </div> </div> <div class="col-md-3"> <div class="single-pricing-box"> <h3>Business</h3> <div class="pricing-icon"> <i class="fa fa-rocket"></i> </div> <div class="pricing-list"> <ul> <li>10GB web Space</li> <li>20+ Mysql Database</li> <li>Managed CMS</li> <li>Unlimited Bandwidth</li> <li>Other features</li> </ul> </div> <h3 class="pricing-count">$75/mo</h3> <a href="" class="bordered-btn">Order Now</a> </div> </div> </div> </div> </section> <!--jQuery CDN--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <!--Bootstrap JS CDN--> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; font-weight: 700; color: #333; font-family: 'Roboto Slab', serif; } html, body { height: 100%; font-family: 'Noto Serif', serif; } /*Main Style*/ section.section-padding { padding: 80px 0; } .section-title { margin-bottom: 50px; text-align: center; } .section-title h2 { font-size: 30px; position: relative; } .section-title h2 span { color: #9b59b6; } .section-title h2:before { background: #9b59b6; bottom: -10px; content: ""; height: 3px; left: 50%; margin-left: -45px; position: absolute; width: 90px; } .section-title h2:after { background: #333; bottom: -10px; content: ""; height: 3px; left: 50%; margin-left: -15px; position: absolute; width: 30px; } .section-title p { font-size: 17px; } .single-pricing-box { border: 2px solid #D6DDD9; padding: 20px; text-align: center; -webkit-transition: .2s; transition: .2s; } .single-pricing-box:hover{ border-color: #9b59b6; box-shadow: 0 0 30px #f1f1f1; } .single-pricing-box h3 { background: #ddd none repeat scroll 0 0; padding: 10px; text-transform: uppercase; font-weight: 500; } .pricing-icon { font-size: 60px; margin-bottom: 20px; -webkit-transition: .3s; transition: .3s; } .single-pricing-box:hover .pricing-icon { color: #9b59b6; } .pricing-list { margin-bottom: 25px; text-align: left; } .pricing-list ul { line-height: 26px; list-style: outside none none; margin: 0; padding: 0 0 0 16px; } .pricing-list ul li{ font-size: 15px; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .pricing-list ul li:hover{ padding-left: 5px; } .pricing-list ul li:before{ font-family: fontAwesome; content: "\f00c"; color: #9b59b6; padding-right: 8px; } .pricing-list ul li.off:before{ content: "\f00d"; color: red; } .single-pricing-box h3.pricing-count { text-transform: none; } a.bordered-btn { border: 1px solid #ddd; color: #333; display: inline-block; padding: 10px 30px; border-radius: 50px; -webkit-transition: .3s; transition: .3s; font-size: 16px; text-decoration: none; } a.bordered-btn:hover{ background: #9b59b6; color: #fff; border-color: #9b59b6; }

Related: See More

Paper Dashboard Pro Angular
BS4 Simple & Clean Pricing table
Bootstrap Tabs with Table
Creative Princing Table

Questions / Comments: