"Responsive pricing tables with Hover Effects"
Bootstrap 3.2.0 Snippet by gondor

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <h2>STYLE 1</h2> <!-- PRICING TABLE STYLE 1--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Starter</div> <div class="price_table_body"> <div class="price_table_row">1 Website</div> <div class="price_table_row">10 GB Storage</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div> <div class="price_table_container"> <div class="price_table_heading">Basic</div> <div class="price_table_body"> <div class="price_table_row cost primary-bg"><strong>$ 29</strong><span>/MONTH</span></div> <div class="price_table_row">10 Websites</div> <div class="price_table_row">100 GB Storage</div> <div class="price_table_row">100 GB Bandwidth</div> <div class="price_table_row">50 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Premium</div> <div class="price_table_body"> <div class="price_table_row cost success-bg"><strong>$ 39</strong><span>/MONTH</span></div> <div class="price_table_row">100 Websites</div> <div class="price_table_row">1 TB Storage</div> <div class="price_table_row">1 TB Bandwidth</div> <div class="price_table_row">100 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Master</div> <div class="price_table_body"> <div class="price_table_row cost info-bg"><strong>$ 60</strong><span>/MONTH</span></div> <div class="price_table_row">Unlimited Websites</div> <div class="price_table_row">10 TB Storage</div> <div class="price_table_row">100 TB Bandwidth</div> <div class="price_table_row">1000 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a> </div> </div> </div> </div> <!-- PRICING TABLE STYLE 1--> <!-- SPACER--> <div class="spacer"></div> <!-- SPACER--> <h2>STYLE 2</h2> <!-- PRICING TABLE STYLE 2--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Starter</div> <div class="price_table_body"> <div class="price_table_row cost dark-bg"><strong>$ 19</strong><span>/MONTH</span></div> <div class="price_table_row">1 Website</div> <div class="price_table_row">10 GB Storage</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-dark btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Basic</div> <div class="price_table_body"> <div class="price_table_row cost danger-bg"><strong>$ 29</strong><span>/MONTH</span></div> <div class="price_table_row">10 Websites</div> <div class="price_table_row">100 GB Storage</div> <div class="price_table_row">100 GB Bandwidth</div> <div class="price_table_row">50 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-danger btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Premium</div> <div class="price_table_body"> <div class="price_table_row cost royal-bg"><strong>$ 39</strong><span>/MONTH</span></div> <div class="price_table_row">100 Websites</div> <div class="price_table_row">1 TB Storage</div> <div class="price_table_row">1 TB Bandwidth</div> <div class="price_table_row">100 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-royal btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div> <div class="price_table_container"> <div class="price_table_heading">Master</div> <div class="price_table_body"> <div class="price_table_row cost static-bg"><strong>$ 60</strong><span>/MONTH</span></div> <div class="price_table_row">Unlimited Websites</div> <div class="price_table_row">10 TB Storage</div> <div class="price_table_row">100 TB Bandwidth</div> <div class="price_table_row">1000 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-static btn-lg btn-block">Sign Up</a> </div> </div> </div> </div> <!-- PRICING TABLE STYLE 2--> <h2>STYLE 3</h2><br><br> <!-- PRICING TABLE STYLE 3--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Starter</div> <div class="price_table_body"> <div class="price_table_row cost warning-text"><strong>$ 19</strong><span>/MONTH</span></div> <div class="price_table_row">1 Website</div> <div class="price_table_row">10 GB Storage</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Basic</div> <div class="price_table_body"> <div class="price_table_row cost primary-text"><strong>$ 29</strong><span>/MONTH</span></div> <div class="price_table_row">10 Websites</div> <div class="price_table_row">100 GB Storage</div> <div class="price_table_row">100 GB Bandwidth</div> <div class="price_table_row">50 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div> <div class="price_table_container"> <div class="price_table_heading">Premium</div> <div class="price_table_body"> <div class="price_table_row cost success-text"><strong>$ 39</strong><span>/MONTH</span></div> <div class="price_table_row">100 Websites</div> <div class="price_table_row">1 TB Storage</div> <div class="price_table_row">1 TB Bandwidth</div> <div class="price_table_row">100 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Master</div> <div class="price_table_body"> <div class="price_table_row cost info-text"><strong>$ 60</strong><span>/MONTH</span></div> <div class="price_table_row">Unlimited Websites</div> <div class="price_table_row">10 TB Storage</div> <div class="price_table_row">100 TB Bandwidth</div> <div class="price_table_row">1000 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a> </div> </div> </div> </div> <!-- PRICING TABLE STYLE 3--> <!-- SPACER--> <div class="spacer"></div> <!-- SPACER--> <h2>STYLE 4</h2> <!-- PRICING TABLE STYLE 4--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Starter</div> <div class="price_table_body"> <div class="price_table_row cost dark-text"><strong>$ 19</strong><span>/MONTH</span></div> <div class="price_table_row">1 Website</div> <div class="price_table_row">10 GB Storage</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-dark btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Basic</div> <div class="price_table_body"> <div class="price_table_row cost danger-text"><strong>$ 29</strong><span>/MONTH</span></div> <div class="price_table_row">10 Websites</div> <div class="price_table_row">100 GB Storage</div> <div class="price_table_row">100 GB Bandwidth</div> <div class="price_table_row">50 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-danger btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Premium</div> <div class="price_table_body"> <div class="price_table_row cost royal-text"><strong>$ 39</strong><span>/MONTH</span></div> <div class="price_table_row">100 Websites</div> <div class="price_table_row">1 TB Storage</div> <div class="price_table_row">1 TB Bandwidth</div> <div class="price_table_row">100 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-royal btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="recommended"><strong><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> More Security</strong></div> <div class="price_table_container"> <div class="price_table_heading">Master</div> <div class="price_table_body"> <div class="price_table_row cost static-text"><strong>$ 60</strong><span>/MONTH</span></div> <div class="price_table_row">Unlimited Websites</div> <div class="price_table_row">10 TB Storage</div> <div class="price_table_row">100 TB Bandwidth</div> <div class="price_table_row">1000 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-static btn-lg btn-block">Sign Up</a> </div> </div> </div> </div> <!-- PRICING TABLE STYLE 4--> <h2>STYLE 5</h2> <!-- PRICING TABLE STYLE 5--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Starter</div> <div class="price_table_body"> <div class="price_table_row cost warning-text"><strong>$ 19</strong><span>/MONTH</span></div> <div class="price_table_row">1 Website</div> <div class="price_table_row">10 GB Storage</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-warning btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Basic</div> <div class="price_table_body"> <div class="price_table_row cost primary-text"><strong>$ 29</strong><span>/MONTH</span></div> <div class="price_table_row">10 Websites</div> <div class="price_table_row">100 GB Storage</div> <div class="price_table_row">100 GB Bandwidth</div> <div class="price_table_row">50 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-primary btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="recommended"><strong><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> RECOMMENDED</strong></div> <div class="price_table_container"> <div class="price_table_heading">Premium</div> <div class="price_table_body"> <div class="price_table_row cost success-bg"><strong>$ 39</strong><span>/MONTH</span></div> <div class="price_table_row">100 Websites</div> <div class="price_table_row">1 TB Storage</div> <div class="price_table_row">1 TB Bandwidth</div> <div class="price_table_row">100 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-success btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Master</div> <div class="price_table_body"> <div class="price_table_row cost info-text"><strong>$ 60</strong><span>/MONTH</span></div> <div class="price_table_row">Unlimited Websites</div> <div class="price_table_row">10 TB Storage</div> <div class="price_table_row">100 TB Bandwidth</div> <div class="price_table_row">1000 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-info btn-lg btn-block">Sign Up</a> </div> </div> </div> </div> <!-- PRICING TABLE STYLE 5--> <!-- SPACER--> <div class="spacer"></div> <!-- SPACER--> <h2>STYLE 6</h2> <!-- PRICING TABLE STYLE 6--> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Starter</div> <div class="price_table_body"> <div class="price_table_row cost dark-text"><strong>$ 19</strong><span>/MONTH</span></div> <div class="price_table_row">1 Website</div> <div class="price_table_row">10 GB Storage</div> <div class="price_table_row">10 GB Bandwidth</div> <div class="price_table_row">10 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-dark btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="recommended"><strong><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> More Security</strong></div> <div class="price_table_container"> <div class="price_table_heading">Basic</div> <div class="price_table_body"> <div class="price_table_row cost danger-text"><strong>$ 29</strong><span>/MONTH</span></div> <div class="price_table_row">10 Websites</div> <div class="price_table_row">100 GB Storage</div> <div class="price_table_row">100 GB Bandwidth</div> <div class="price_table_row">50 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-danger btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Premium</div> <div class="price_table_body"> <div class="price_table_row cost royal-text"><strong>$ 39</strong><span>/MONTH</span></div> <div class="price_table_row">100 Websites</div> <div class="price_table_row">1 TB Storage</div> <div class="price_table_row">1 TB Bandwidth</div> <div class="price_table_row">100 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-royal btn-lg btn-block">Sign Up</a> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12 float-shadow"> <div class="price_table_container"> <div class="price_table_heading">Master</div> <div class="price_table_body"> <div class="price_table_row cost static-text"><strong>$ 60</strong><span>/MONTH</span></div> <div class="price_table_row">Unlimited Websites</div> <div class="price_table_row">10 TB Storage</div> <div class="price_table_row">100 TB Bandwidth</div> <div class="price_table_row">1000 Email Addresses</div> <div class="price_table_row">Free Backup</div> <div class="price_table_row">Full Time Support</div> </div> <a href="#" class="btn btn-static btn-lg btn-block">Sign Up</a> </div> </div> </div> </div> <!-- PRICING TABLE STYLE 6-->
.price_table_container{ text-align:center; color:#666; margin-top:35px; font-family: 'Open Sans', sans-serif; } .price_table_heading{ font-size:36px; padding:10px; background:#EEE; } .price_table_row { padding:15px; background: #FFF; } .cost{ padding:30px; font-size:30px; } .cost span{ font-size:15px; } .price_table_row:nth-of-type(even) { background: #F8F8F8; } .btn{ border-radius:0px; } .spacer{width:100%;height:50px;} /*Already Defined Colours*/ /*Background*/ .primary-bg{background:#337AB7;color:#FFF;} .success-bg{background:#5CB85C;color:#FFF;} .info-bg{background:#5BC0DE;color:#FFF;} .warning-bg{background:#F0AD4E;color:#FFF;} .danger-bg{background:#D9534F;color:#FFF;} .dark-bg{background:#444;color:#FFF;} .royal-bg{background:#8E74E2;color:#FFF;} .static-bg{background:#2BB0A6;color:#FFF;} /*Only Text Colours*/ .primary-text{background:#FFF;color:#337AB7;} .success-text{background:#FFF;color:#5CB85C;} .info-text{background:#FFF;color:#5BC0DE;} .warning-text{background:#FFF;color:#F0AD4E;} .danger-text{background:#FFF;color:#D9534F;} .dark-text{background:#FFF;color:#444;} .royal-text{background:#FFF;color:#8E74E2;} .static-text{background:#FFF;color:#2BB0A6;} /*Additional Button styles*/ /*BTN-DARK*/ .btn-dark { color: #fff; background-color: #444; border-color: #444; } .btn-dark:hover, .btn-dark:focus, .btn-dark.focus, .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark { color: #fff; background-color: #222; border-color: #222; } .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark { background-image: none; } /*BTN-ROYAL---------*/ .btn-royal { color: #fff; background-color: #8E74E2; border-color: #8E74E2; } .btn-royal:hover, .btn-royal:focus, .btn-royal.focus, .btn-royal:active, .btn-royal.active, .open > .dropdown-toggle.btn-royal { color: #fff; background-color: #7451E8; border-color: #7451E8; } .btn-royal:active, .btn-royal.active, .open > .dropdown-toggle.btn-royal { background-image: none; } /*BTN-STATIC---------*/ .btn-static { color: #fff; background-color: #2BB0A6; border-color: #2BB0A6; } .btn-static:hover, .btn-static:focus, .btn-static.focus, .btn-static:active, .btn-static.active, .open > .dropdown-toggle.btn-static { color: #fff; background-color: #07A094; border-color: #07A094; } .btn-static:active, .btn-static.active, .open > .dropdown-toggle.btn-static { background-image: none; }

Related: See More


Questions / Comments: