Колонки одинаковой высоты Bootstrap

В одном из проектов мне было нужно, чтобы четыре стандартных блока col-xs-3 были одинаковой высоты, подстраиваясь под высоту самого «длинного». Для того, чтобы этого добиться, можно использовать простое решение:

jQuery плагин ColEqualizer

Источник

Демо

Скачать плагин

ColEqualizer — это очень маленький jQuery плагин, используемый для динамического выравнивания высоты всех дочерних колонок grid-системы Bootstrap. Отлично работает на экране любого размера.

Как использовать:

Подключить jQuery bootstrap-colequalizer.js после библиотеки jQuery.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="bootstrap-colequalizer.js"></script>

Добавить CSS-класс col-eq к Bootstrap вёрстке.

<div class="row col-eq">
  <div class="col-sm-3">Столбец 1</div>
  <div class="col-sm-3">Столбец 2</div>
  <div class="col-sm-3">Столбец 3</div>
  <div class="col-sm-3">Столбец 4</div>
</div>

Инициализировать плагин.

$('.col-eq').colequalizer();