Делаем колонки одинаковой высоты в Bootstrap 3

Довольно часто при использовании сетки Bootstrap 3 (в Bootstrap 4 такой проблемы уже нет) мы сталкиваемся с проблемой, когда блоки (col-*-*) имеют разные размеры высоты. Такие блоки (колонки) могут иметь разное содержимое из-за чего и появляется разница в их высоте. Решить эту проблему достаточно просто. Рассмотрим несколько способов.

Использование модуля Flexbox из CSS3

Разметка HTML:

<div class="container">
  <div class="row row-flex">
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
      <!-- содержимое блока -->
    </div>
  </div>
</div>

Добавить стили для класса row-flex:

.row-flex {
  display: flex;
  flex-flow: row wrap;
}

С помощью jQuery

Здесь нет необходимости использовать дополнительные классы. jQuery сам всё найдёт и применит нужные преобразования.

Разметка HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-4 col-lg-4">
      <!-- содержимое блока -->
    </div>
  </div>
</div>

jQuery скрипт:

$('.container').each(function(){
    var highestBox = 0;
    $('.col-md-4 ', this).each(function(){
      if($(this).height() > highestBox) {
        highestBox = $(this).height();
      }
    });
    $('.col-md-4 ',this).height(highestBox);
  });

Более короткий и универсальный jQuery скрипт:

$(function(){
	var equal_height = 0;
	$(".row div").each(function(){
		if ($(this).height() > equal_height) { equal_height = $(this).height(); }
	});
	$(".row div").height(equal_height);
});