Is it possible to get two fluid column wells with uneven column data length to be the same height?
You should be using a custom selector for one and two the tables styles should not be applied to [class*='col-'] that have defined widths. This method should ONLY be used if you want equal height AND equal width columns. It is not meant for any other layouts and is NOT responsive.
As of 2017, the best (and easiest) way to make equal height columns in a responsive design is using CSS3 flexbox. Now we have columns that are equal in height, and their content fills the full height ot the entire column.
You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.
Select a column or a range of columns. On the Home tab, select Format > Column Width (or Column Height). Type the column width and select OK.
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
A variation if you want equal height wells or columns with rounded corners:
http://jsfiddle.net/panchroma/4Pyhj/
EDIT
Another variation with equal height wells or columns with rounded corners, this time for Bootstrap 3
http://jsfiddle.net/panchroma/D4xdE/
It's more or less the same as with Bootstap 2, but with some refinements to accomodate a change in how BS spaces the column grids now.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With