How to make columns the same height in boostrap?

Question

css

Task:

-
Layout: Layout
code
Question: how to make columns (col-) have the same height?
Important: not using flex layout
I know the solution for display: table; but I don’t know how beautiful this solution is for Bootstrap and the inline-block adaptability of the columns (col-) falls off then

Answer 1

use js or there are ready-made methods - equalheights.js for example.

Answer 2

$(document).ready(function(){
h1 = $('#block1').height();
h2 = $('#block2').height();
if (h1>h2) {
$('#block2').height(h1);
} else {
$('#block1').height(h2);
};
});

Answer 3

The insanity grew stronger.
I know at least 3 different ways
and the most idiotic of them is js
1. no js
2. no custom nor a line of code
3. adaptability.
4. clean bootstrap
The height of the tallest div in the line at the current resolution.
All you need is to insert a condition in php every 2 3 or 4 elements, depending on your layout, push the corresponding or clearfix or, as in my example, just col 12
Yes, you have to add a little php here, but it's very easy and you can already add on output. And don't call it code. It also supports adaptability.
And even hypothetically it cannot break.
see here for more details (of course in the code) see the cutoffs in each 2 3 element.
https://www.mydefile.ru/catalog/

Answer 4

Try this:
1. Set the main container (the wrapper of these blocks) to display: flex and align-items: stretch
2. Set the content container (block) to display: flex and flex-direction: column
3. Set the date element to margin-top: auto
Start learning bootstrap 4. It's all implemented in classes there