Cette fonction nécessite que chaque colonne ait les classes de taille pour toutes les tailles de fenêtre possible, soit « col-xs-* », « col-sm-* », « col-md-* », « col-lg-* ». Il faut également ajouter une classe « col-same-height » aux colonnes que l’on veut avoir de même hauteur.

bootstrap-sols-same-height.js

$(window).load(function() {
    $(window).resize(resizeColSameHeight);
    resizeColSameHeight();
});

/**
 * Redimensionnement hauteur des colonnes bootstrap "col-same-height" ligne par ligne selon la taille de la vue
 */
function resizeColSameHeight() {
    if ($('.col-same-height').length > 0) {
        var width = $('body').width();
        if (width < 768)
            var size = 'xs';
        else if (width < 992)
            var size = 'sm';
        else if (width < 1200) var size = 'md'; else var size = 'lg'; var classnames = $('.col-same-height').first().attr("class").toString().split(' '); for(var i in classnames) { var classname = classnames[i]; if (classname.indexOf('col-' + size + '-') != -1) var nbCols = 12 / classname.replace('col-' + size + '-', ''); } $('.col-same-height').css('height', 'auto'); if (nbCols > 1) {
            var i = 0;
            do {
                elems = $('.col-same-height').slice(i, i+nbCols);
                var maxHeight = 0;
                $(elems).each(function() {
                    if ($(this).height() > maxHeight)
                        maxHeight = $(this).height();
                });
                $(elems).each(function() {
                    $(this).css('height', maxHeight + 'px');
                });
                i += nbCols;
            } while (elems.length > 0);
        }
    }
}