Same height column bootstrap 3 row responsive

Question

Hi I have four divs in a bootstrap row. I want all divs in this row to have the same height and not break responsibility. I don't know how to do this without breaking responsibility. I have tried solving this with fixed heights but in terms of responsiveness this is a bad solution. Thanks :-) ```

Title

sidiis amicorum mariti inops cum liberis uxor alitur Reguli et dotatur ex aerario filia Scipionis, cum nobilitas florem adultae virginis diuturnum absentia pauperis erubesceret patr

Title

sidiis amicoru…

Accepted Answer

You can achieve this by using javascript. Find out the biggest height of the 4 divs and make all of them at the same height like the biggest one.

Here is the code:

```
$( document ).ready(function() {
    var heights = $(".well").map(function() {
        return $(this).height();
    }).get();

maxHeight = Math.max.apply(null, heights);

$(".well").height(maxHeight);
});
```

edit history: changed the ',' sign into ';' sign

Same height column bootstrap 3 row responsive

Solution

Problem