Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap - Same heights on fluid columns

Is it possible to get two fluid column wells with uneven column data length to be the same height?

like image 206
ina Avatar asked May 27 '12 04:05

ina


People also ask

How do I make bootstrap 5 columns equal 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.

How do you make all col the same height?

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.

How do I make bootstrap 4 columns equal height?

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

How do you fix the height of a column?

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.


1 Answers

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.

like image 51
David Taiaroa Avatar answered Sep 21 '22 15:09

David Taiaroa