<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>Designer</h2> <span>FREE</span> </div> <ul> <li class="plan-feature">Unlimited Products</li> <li class="plan-feature">Order Management</li> <li class="plan-feature">Marketplace Advertisement</li> <li class="plan-feature">Service Charge 25%</li> <li class="plan-feature">Free Shipping integration</li> <li class="plan-feature">Free in-buit payment integration</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>Enterprenure<span class="badge badge-warning">Popular</span></h2> <span><strike><font color="black">Rs 800</font></strike> <font color="white">Rs 500 / 6 months - <span class="label label-warning">Sale</span></font></span> </div> <ul> <li class="plan-feature">Unlimited Products</li> <li class="plan-feature">Order Management</li> <li class="plan-feature">Marketplace Advertisement</li> <li class="plan-feature">Service Charge 20%</li> <li class="plan-feature">Free Shipping integration</li> <li class="plan-feature">Free in-buit payment integration</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>Couture</h2> <span>Rs 1000 / 6 Months</span> </div> <ul> <li class="plan-feature">Unlimited Products</li> <li class="plan-feature">Order Management</li> <li class="plan-feature">Marketplace Advertisement</li> <li class="plan-feature">Service Charge 15%</li> <li class="plan-feature">Free Shipping integration</li> <li class="plan-feature">Free in-buit payment integration</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; background-color: #d5375f; -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; background-color: goldenrod; -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; }