И так, довольно часто я сталкиваюсь с проблемой блоков с различными размерами высоты из-за различного содержимого в то время как эти блоки должны быть одинаковы по высоте. Решить эту проблему достаточно просто. Рассмотрим несколько способов.

Для начала предположим что страница в которой нужно выровнять блоки по высоте имеет следующую HTML разметку:

<div class="row">
    <div class="col-md-4">
        <p>Строка 1</p>
        <p>Строка 2</p>
        <p>Строка 3</p>
    </div>
    <div class="col-md-4">
        <p>Строка 4</p>
        <p>Строка 5</p>
    </div>
    <div class="col-md-4">
        <p>Строка 6</p>
    </div>
</div>

Выравнивание блоков по высоте в Twitter Bootstrap с помощью CSS

Мы можем выравнять эти колонки с помощью CSS3, обратите внимание, что это способ будет работать только в современных браузерах, которые поддерживают CSS3. 

.equal, .equal > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

Теперь добавьте класс equal к классу row главного блока и колонки будут равными по высоте.

Выравнивание блоков по высоте в Twitter Bootstrap с помощью jQuery

Решение с помощью JQuery может быть реализовано без добавления дополнительных CSS классов.

Проверяем в цикле наибольшую высоту блока и задаем эту высоту остальным блокам:

$(document).ready(function(){
    $('.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);
    });
});