Pour rappel, les grilles Bootstrap sont basées sur le modèle des boites flexibles (flexbox). La plupart des classes Bootstrap permettant d’aligner les éléments portent des noms similaires aux noms des propriétés d’alignement du flexbox, ce qui rend les choses beaucoup plus faciles à mémoriser pour nous.
Gérer l’alignement vertical des colonnes dans une ligne
Par défaut, les colonnes vont occuper toute la hauteur d’une ligne. On va cependant pouvoir demander aux colonnes de n’occuper que la place nécessaire à leur contenu et de s’aligner soit au début, soit au milieu, soit en fin de ligne selon l’axe vertical.
Cela va pouvoir être intéressant dans le cas où nos différentes colonnes possèdent des contenus qui utilisent des espaces en hauteur différents ou dans le cas où une hauteur a été explicitement définie pour la ligne.
La hauteur d’une ligne est en effet par défaut déterminée par la colonne dont le contenu prend le plus de place en hauteur. Rien ne nous empêche cependant de déterminer une hauteur pour une ligne.
Bootstrap va nous fournir deux grandes façons d’aligner nos colonnes verticalement dans une ligne : nous allons soit pouvoir aligner toutes les colonnes en même temps, soit pouvoir aligner les colonnes une par une de manière différente.
Pour aligner toutes les colonnes en même temps par rapport à une ligne, nous allons appliquer les classes .align-items-* à nos lignes. Nous pouvons choisir parmi trois classes qui représentent trois positions différentes :
.align-items-start: les colonnes seront alignées en début (en haut) de la ligne ;.align-items-center: les colonnes vont être alignées au centre de la ligne ;.align-items-end: les colonnes seront alignées en fin (en bas) de la ligne.
Pour aligner chaque colonne individuellement, nous allons cette fois-ci plutôt utiliser les classes .align-self-* qu’on va utiliser avec chaque élément cette fois-ci. Là encore, nous pouvons choisir parmi trois classes :
.align-self-start: la colonne sera alignée en début (en haut) de la ligne ;.align-self-center: la colonne va être alignée au centre de la ligne ;.align-self-end: la colonne sera alignée en fin (en bas) de la ligne.
See the Pen
Bootstrap 1.5.1 by Pierre (@pierregiraud)
on CodePen.
Dans l’exemple ci-dessus, on ajoute une classe personnalisée .custom-line pour ajouter des styles particuliers à nos lignes sans polluer le reste de la page (il faut imaginer qu’on crée un « vrai » site et que notre page possède plusieurs grilles ou différents types de lignes pour comprendre l’intérêt de faire cela).
Ensuite, comme indiqué dans mon fichier HTML, je passe quelques styles supplémentaires aux lignes et colonnes via un élément HTML style et je demande notamment aux lignes d’avoir une hauteur minimale de 5rem pour que la ligne soit suffisamment haute pour apprécier l’effet des classes d’alignement vertical.
Gérer l’alignement horizontal des colonnes dans une ligne
On va principalement vouloir aligner horizontalement des colonnes dans une ligne dans le cas où colonnes créées n’occupent pas tout l’espace de la ligne, c’est-à-dire dans le cas où il reste de l’espace à distribuer entre les colonnes.
Cela va être le cas si on utilise des classes .col-{nombre} pour chaque colonne de la ligne et que la somme des nombres fait moins de 12.
On va pouvoir aligner horizontalement nos colonne dans la ligne grâce aux classes .justify-content-* qu’on va devoir appliquer à la ligne en soi. Nous allons pouvoir utiliser les classes suivantes :
.justify-content-start: les colonnes vont se positionner en début de ligne (à gauche par défaut) ;.justify-content-center: les colonnes vont se positionner au milieu de la ligne ;.justify-content-end: les colonnes vont se positionner en fin de ligne (à droite par défaut) ;.justify-content-around: les colonnes vont être réparties équitablement dans la ligne. Chaque colonne va posséder le même écart à droite et à gauche, même celles situées contre les bords de la ligne (l’espacement entre le bord de la ligne et la première / dernière colonnes sera donc deux fois plus petit que l’espacement entre deux colonne) ;.justify-content-between: les colonnes vont être réparties équitablement dans la ligne. La première colonne va être collée contre le début de la ligne et la dernière va être collée contre la fin de celle-ci.
See the Pen
Bootstrap 1.5.2 by Pierre (@pierregiraud)
on CodePen.
Supprimer les gouttières ou padding entre les colonnes
Les gouttières sont des espaces situés de part et d’autre du contenu de chacune de nos colonnes. De manière effective, elles sont représentées par une propriété padding. Elles servent à espacer les contenus des différentes colonnes.
Par défaut, un padding gauche et droit de 15px est affecté à chaque colonne créée. Cette marge intérieure est contrebalancée au niveau de la ligne en affectant automatiquement un margin gauche et droit de -15px (négatif donc) sur chaque ligne. Cela permet d’obtenir une consistance dans l’alignement des éléments.
On peut néanmoins choisir de supprimer les gouttières entre les colonnes en appliquant la classe .no-gutters à l’élément représentant la ligne en soi. Cela va supprimer le padding gauche et droit des éléments enfants directs de l’élément représentant la ligne. Les marges négatives appliquées par défaut sur la ligne vont également être supprimées.
See the Pen
Bootstrap 1.5.3 by Pierre (@pierregiraud)
on CodePen.
Ici, j’ai appliqué une couleur de bleue à mes deux lignes et une couleur de fond à la boite de contenu seule de mes colonnes afin que vous puissiez voir l’espace occupé par les gouttières (qui correspond donc à l’espace colorié en bleu). La classe .mt-3 sert simplement à ajouter une marge externe supérieure pour espacer nos deux lignes.
Renvoyer des colonnes à la ligne
Nous allons pouvoir forcer le renvoi de colonnes à la ligne en utilisant un hack qui consiste à insérer un élément avec une largeur de 100% à l’endroit où l’on souhaite renvoyer les colonnes à la ligne. Pour cela, nous utiliserons généralement un div entre nos colonnes ainsi que les classes relatives aux dimensions Bootstrap (en l’occurence ici la classe .w-100) dont nous reparlerons plus tard dans ce cours.
See the Pen
Bootstrap 1.5.4 by Pierre (@pierregiraud)
on CodePen.
