equal height to columns bootstrap4

Question

I am using the bootstrap 4 and wanted to know how I leave all the columns of the same height ? If possible without using flexbox to be compatible with older browser ( bah !).

Thank you

Arnav Borborah · Answer 1 · 2017-09-11T11:48:31.660

1

Use the first two solutions of this answer. The third solution involves a flexbox, but as you mentioned, you don't want that.

In case link doesn't work, here is 1st solution: (Use with caution)

.row {
    overflow:hidden;
}
[class*="col-"]{
    margin-bottom:-99999px;
    padding-botton:99999px;
}

Solution 2: (Tables)

.row {
   display:table;
}
[class*="col-"] {
    float:none;
    display:table-cell;
    vertical-align:top;
}

edited Sep 11 '17 at 11:48

answered Jul 04 '16 at 13:38

Arnav Borborah

11,357
8
43
88

1

As mentioned in the other answer, these solutions don't really work as they break column wrapping and responsiveness. http://codeply.com/go/tPLjH5r6dJ – Carol Skelly Jul 05 '16 at 18:34
You should know right off the bat that if a solution is proposing you add `-99999px` to your styles, then it's obviously a total hack solution and should be used with extreme caution. – ESR Sep 11 '17 at 03:46
@ArnavBorborah the comment is for future visitors of this page from Google, but you're welcome. – ESR Sep 15 '17 at 02:06

Carol Skelly · Answer 2 · 2017-03-28T14:58:53.583

0

Do you want the content of the columns to be equal height? Bootstrap 4's equal height cards can be used for this. ~~This uses display:table and display:table-cell when flexbox is not enabled~~.

UPDATE

Now that Bootstrap 4 (alpha 6) is flexbox by default, the columns are always equal height: http://www.codeply.com/go/m20UAOFw79

edited Mar 28 '17 at 14:58

answered Jul 05 '16 at 15:12

Carol Skelly

351,302
90
710
624

1

That wasn't the OP's question. He want's the Actual columns height. The equal height cards isn't a solution. – Arnav Borborah Jul 05 '16 at 18:06
I was offering another option as the table-cell and negative margin methods have many adverse effects. – Carol Skelly Jul 05 '16 at 18:35

score -2 · Accepted Answer · answered Jan 21 '17 at 19:19

Here is what you do if you want to use flexbox

The CSS

.row.is-flex {
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand. 
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

The html

<div class="row is-flex">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

source (https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height)

Bootstrap 4 now is flexbox by default so all this extra CSS is unnecessary. http://www.codeply.com/go/m20UAOFw79 — Carol Skelly, Feb 10 '17 at 13:43

equal height to columns bootstrap4

3 Answers3