"Pricing Table - Equal Height"
Bootstrap 2.3.2 Snippet by msurguy

<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; }

Related: See More


Questions / Comments:

Nice but I don't think for responsive (tested on 768*1024 with firefox responsive tools).

khaled_webdev () - 3 years ago - Reply 0


Will Update this Snippet for Bootstrap 3 in the coming days

ConnerT () - 4 years ago - Reply 0


Thanks! That would be great!

maxsurguy () - 4 years ago - Reply 0


using span4 inside a body within a container stacked the price tables one on the other and not side by side as you have (the browser was wide).

So I replaced "col-md-4" with "span4" and that gets the price tables side by side, but loses the gutter.

How do I get the inside column (gutter) with gaps as you in your example.

Here's my pasted code (for the col-md-4 example) - should be here for one week:
http://paste.ofcode.org/9n9...

Lee () - 5 years ago - Reply 0


Changing the border to bottom and making the last child have a border of zero makes it look better.

.pricing-table .plan ul li.plan-feature {
border-bottom: 1px solid #c5c8c0;
}

.pricing-table .plan ul li.plan-feature:last-child {
border-bottom: 0;
}

John Walker () - 5 years ago - Reply 0


how to get 4 columns

Pavan Nadella () - 5 years ago - Reply 0


I found this very similar one to work much better: https://bootsnipp.com/snipp...

And it also does not require of the ugly extra css!

Matías Herranz () - 5 years ago - Reply 0


Hmm yes but that one does not have equal hieghts nor the hover effects :/

ConnerT () - 5 years ago - Reply 0


When I use this code they stack on top of each other and not side by side, does anyone have any suggestions what I'm doing wrong

Miffyboy () - 5 years ago - Reply 0


Matías Herranz () - 5 years ago - Reply 0


This is not working for me. I only see them being equal height because they have equal content lines. When I change the length of an item in one of the cells to be longer than the width of the column, the cells lose their equal height. For example. if you change Unlimited Space to Unlimited Space for Storing All of Your Backups, it makes that column taller because of the line wrapping.

compugator () - 5 years ago - Reply 0


You can add more lines to other items by using
or

 

tags, that way you can equal it out. There is no bullet proof way of doing vertical height that works across all browsers as of now...

maxsurguy () - 5 years ago - Reply 0


max Disqus does not null HTML tags so they are posted as code ! :P

ConnerT () - 5 years ago - Reply 0


Wow !!

Paulo () - 5 years ago - Reply 0


Thanks :)

ConnerT () - 5 years ago - Reply 0