Dans cette leçon nous allons voir comment faire pour aligner verticalement et horizontalement des colonnes sur une grille Bootstrap 5.
L’alignement vertical des colonnes dans Bootstrap 5
Pour aligner les colonnes verticalement, Bootstrap 5 nous propose deux sortes de classes différentes, selon que l’on souhaite que toutes les colonnes d’une même rangée soient alignées de façon identique ou qu’une ou des colonnes aient leur propre alignement.
Aligner verticalement toutes les colonnes d’une rangée de façon identiques
Pour aligner de la même manière toutes les colonnes contenues dans une rangée, nous allons appliquer à cette même rangée (.row) les classes suivantes.
- .align-items-start : les colonnes seront alignées en haut de la rangée (alignement par défaut).
- .align-items-center : les colonnes seront alignées au milieu de la rangée.
- .align-items-end : les colonnes seront alignées en bas de la rangée.
Exemple :
Créons 1 rangée avec 3 colonnes de 4 colonnes de largeur et un point de transition a 768px (.md).
Par défaut les colonnes se placent en haut de la rangée, ce qui équivaut à .align-items-start .
Si l’on souhaite que toutes les colonnes de la rangée soient alignées en bas nous allons ajouter .align-items-end à notre rangée (.row).
Ps : ne vous préoccupez pas de la classe .vh que j’ai rajouté a la classe .row, elle est juste là pour créer de l’espace de façon à mieux percevoir les différents alignements.
Si l’on veut que les colonnes soient alignées verticalement au centre on va utiliser la classe .align-items-center.
Aligner verticalement et individuellement les colonnes d’une rangée
Aligner séparément les colonnes, signifie que toutes les colonnes d’une même rangée n’auront pas nécessairement le même alignement vertical.
Pour ce faire, nous allons trois nouvelles classes :
- .align-self-start : la colonne sera alignée en haut de la rangée.
- .align-self-center : la colonne sera alignée au milieu de la rangée.
- .align-self-end : la colonne sera alignée en bas de la rangée.
Ces classes ne seront plus ajoutées à la rangée (.row) mais a la colonne (.col) elle-même.
Créons 3 colonnes et alignons-les verticalement de la façon suivante :
- Colonne 1 en haut.
- Colonne 2 au centre.
- Colonne 3 en bas.
L’alignement horizontal des colonnes dans Bootstrap 5
L’alignement horizontal des colonnes va se faire à l’intérieur d’une rangée, cela signifie que les classes permettant cet alignement devront être ajoutées à la classe .row (rangée).
Pour créer un alignement horizontal des colonnes, il faut bien entendu qu’elles n’occupent pas la totalité de l’espace d’une rangée c’est-à-dire 12 colonnes.
Si nous reprenons l’exemple ci-dessus et créons 3 colonnes de 4 colonnes de largeur, on ne pourra pas réellement voir l’alignement les colonnes sur la rangée, car il n’y aura plus d’espace libre.
3 x 4 = 12.
Nous allons donc créer 3 colonnes de 3 colonnes de large, ce qui nous laissera 3 colonnes de libre pour créer des alignements horizontaux.
3 x 3 = 9 ; 12 – 9 = 3.
Les classes pour aligner horizontalement les colonnes sont les suivantes :
- .justify-content-start : les colonnes vont se positionner au début de la rangée (à gauche).
.justify-content-end : les colonnes vont se positionner à la fin de la rangée.
.justify-content-center : les colonnes vont se positionner au milieu de la rangée.
.justify-content-between : les colonnes vont être réparties équitablement sur la rangée. La première colonne va être collée au début de la rangée tandis que la dernière colonne va être collée à la fin de la rangée.
Les colonnes vont être espacées par des marges à droite et à gauche, à l’exception de la première colonne qui n’aura pas de marge à gauche et la dernière colonne qui n’aura pas de marge à droite.
.justify-content-around : comme avec .justify-content-center, les colonnes vont être réparties équitablement sur la rangée. Mais la différence est que même les colonnes situées au début et à la fin de la rangée vont posséder des marges des deux côtés.
L’espacement entre les colonnes situé côte à côte va donc être plus important puisqu’il va additionner la marge droite d’une colonne avec la marge gauche de celle qui suit.
.justify-content-evenly : semblable a .justify-content-around hormis que l’espacement de gauche de la première colonne et l’espacement droit de la dernière colonne sera identique aux espaces entre les colonnes du milieu.
Combiner l’alignement horizontal et vertical des colonnes
Il est bien sûr possible d’aligner toutes les colonnes d’une même rangée à la fois horizontalement et verticalement.
Pour ce faire, c’est très simple nous allons tout simplement additionner les classes.
Exemple:
Alignons horizontalement au centre et verticalement en bas toutes les colonnes d’une même rangée en appliquant à la classe .row (rangée) les classes suivantes :
- .justify-content-center: pour aligner horizontalement au centre les colonnes sur la rangée.
- .align-items-end : pour aligner la colonne en bas de la rangée.
