Comment faire en sorte que mes colonnes Bootstrap aient toutes la même hauteur ?

Avec Bootstrap, il est nécessaire d'ajouter du code CSS pour aligner les colonnes sur une même hauteur.

Le framework CSS Bootstrap utilise un système de grille pour afficher des éléments sur la page. Les colonnes ont une hauteur qui est ajustée en fonction des éléments qu'elles contiennent. Avec ce système, les colonnes peuvent donc avoir une hauteur différente. Pour qu'elles aient la même hauteur, il est nécessaire d'ajouter du code en CSS.

La première solution est d'ajouter aux colonnes une marge négative avec un padding positif (avec la même valeur). Les 2 propriétés combinées vont provoquer un alignement des colonnes. Pour que le contenu soit restreint à la ligne, il faut cacher ce qui dépasse avec la propriété CSS "overflow".

.row{
 overflow: hidden; 
}

[class*="col-"]{
 margin-bottom: -99999px;
 padding-bottom: 99999px;
}

Cette solution présente l'avantage de ne pas briser le design "responsive" pour des écrans de petite taille.

Vous pouvez également modifier l'affichage de la ligne pour qu'elle se comporte comme un tableau. On affecte alors à la propriété "display" la valeur "table". Pour que les colonnes se comportent comme des cellules, on utilisera la valeur "table-cell". Il faut également annuler la propriété "float" des colonnes, et aligner le texte en haut avec "vertical-align" :

.row {
 display: table;
}
[class*="col-"] {
 float: none;
 display: table-cell;
 vertical-align: top;
}

Une dernière solution consiste à utiliser le modèle de boîtes flexibles. Ce modèle permet de faire en sorte que les éléments contenus soient alignés. Par défaut, les contenus sont alignés verticalement. Il suffit de modifier la propriété "display" en affectant la valeur "flex".

/* Pensez à ajouter également les versions avec préfixes pour être compatibles avec le plus de navigateurs possibles */
.row {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

Ces deux dernières solutions peuvent provoquer un problème d'affichage pour des écrans plus petits. Utilisez alors des "media-query" pour adapter votre site.

Bootstrap