<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row-fluid pricing-table pricing-three-column"> <div class="span4 plan"> <div class="plan-name-bronze"> <h2>Bronze</h2> <span>$8.99 / Month</span> </div> <ul> <li class="plan-feature">10 Users</li> <li class="plan-feature">5TB Disk Space</li> <li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li> </ul> </div> <div class="span4 plan"> <div class="plan-name-silver"> <h2>Silver <span class="badge badge-warning">Popular</span></h2> <span><strike>$10.99</strike> <font color="red">$9.99 - <span class="label label-warning">Sale</span></font></span> </div> <ul> <li class="plan-feature">50 Users</li> <li class="plan-feature">10TB Disk Space</li> <li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li> </ul> </div> <div class="span4 plan"> <div class="plan-name-gold"> <h2>Gold</h2> <span>$15.99 / Month</span> </div> <ul> <li class="plan-feature">Unlimited Users</li> <li class="plan-feature">Unlimited Space</li> <li class="plan-feature"><a href="#" class="btn btn-primary btn-plan-select"><i class="icon-white icon-ok"></i> Select</a></li> </ul> </div> </div> </div>

body{padding-top:20px} .pricing-table .plan { border-radius: 5px; text-align: center; background-color: #f3f3f3; -moz-box-shadow: 0 0 6px 2px #b0b2ab; -webkit-box-shadow: 0 0 6px 2px #b0b2ab; box-shadow: 0 0 6px 2px #b0b2ab; } .plan:hover { background-color: #fff; -moz-box-shadow: 0 0 12px 3px #b0b2ab; -webkit-box-shadow: 0 0 12px 3px #b0b2ab; box-shadow: 0 0 12px 3px #b0b2ab; } .plan { padding: 20px; color: #ff; background-color: #5e5f59; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .plan-name-bronze { padding: 20px; color: #fff; background-color: #665D1E; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .plan-name-silver { padding: 20px; color: #fff; background-color: #C0C0C0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .plan-name-gold { padding: 20px; color: #fff; background-color: #FFD700; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .pricing-table-bronze { padding: 20px; color: #fff; background-color: #f89406; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .pricing-table .plan .plan-name span { font-size: 20px; } .pricing-table .plan ul { list-style: none; margin: 0; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .pricing-table .plan ul li.plan-feature { padding: 15px 10px; border-top: 1px solid #c5c8c0; } .pricing-three-column { margin: 0 auto; width: 80%; } .pricing-variable-height .plan { float: none; margin-left: 2%; vertical-align: bottom; display: inline-block; zoom:1; *display:inline; } .plan-mouseover .plan-name { background-color: #4e9a06 !important; } .btn-plan-select { padding: 8px 25px; font-size: 18px; }