Using twitter bootstrap 2.0 - How to make equal column heights?

Question

Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of html

<div class='container'>   <div class='row'>     <div class='span2'>       <div class='well'>         XXXX       </div>     </div>     <div class='span2'>       <div class='well'>         XXXX         XXXX       </div>     </div>     <div class='span2'>       <div class='well'>         XXXX         XXXX         XXXX       </div>     </div>   </div> </div> 

I would like each well to end up the same height if possible?

Answer 1

Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

.col{     margin-bottom: -99999px;     padding-bottom: 99999px;     background-color:#ffc; }  .col-wrap{       overflow: hidden;    } 

You can see it working at jsFiddle

Edit

In response to a question, here's a variation if you need equal height wells or equal height columns with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/

Edit

In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/