Plan du cours
Dans cette seconde partie, nous allons voir comment aligner les contenus puis nous verrons comment aligner les colonnes (.col) horizontalement et verticalement dans les rangées (.row).
Alignement horizontal d’un contenu.
Pour ce faire nous allons utiliser 3 classes différentes :
- text-left : alignement à gauche.
- text-center : alignement au centre
- text-right : alignement à droite.
Pour illustrer le tout, voici 3 colonnes avec leur contenu aligné à gauche pour la première, au milieu pour la seconde et à droite pour la troisième.
Alignement Vertical d’un contenu.
L’alignement vertical d’un contenu va se faire en ajoutant des classes à la rangée (.row).
- align-items-start : alignement en haut.
- align-items-center : alignement au milieu.
- align-items-end : alignement en bas.
Le problème, dans ce cas, est que tous les éléments d’une rangée vont être positionnés de la même manière.
Que faire si on veut qu’un élément soit placé différemment des autres dans une même rangée ?
On va utiliser la classe : align-self sur la colonne qui contient l’élément que l’on veut positionner autrement.
- align-self-start : alignement en haut.
- align-self-center : alignement au milieu.
- align-self-end : alignement en bas.
Dans l’exemple ci-dessous, nous allons placer le contenu 2 au milieu de la rangée :
Bien, faisons maintenant une combinaison de ce que nous venons de voir jusqu’ici en plaçant le contenu en bas de sa rangée et au milieu de sa colonne.
Alignement horizontal des colonnes
Class : justify-content
- justify-content-start : positionne la colonne à gauche.
- justify-content-center : positionne la colonne au centre.
- justify-content-end : positionne la colonne à droite.
- justify-content-around : ajoute un espace de dimension identique entre la première et la dernière colonne
- justify-content-between : positionne les colonnes à gauche et à droite.
Alignement à gauche :
Alignement au centre :
Alignement à droite :
Alignement avec un espacement :
Alignement gauche et droite :
On récapitule
Décalage des colonnes :
Classe : offset
Grace à la classe offset vous pouvez décaler des colonnes sur une grille.
Exemple avec décalage :
Décalage grâce au margin :
Classe : ml-auto / mr-auto
Ces classes vont s’ajouter sur les colonnes (.col).
Ici ml fait référence à margin-left que l’on retrouve en css et vous l’aurez compris mr fait référence à margin-right.
On peut, par ce moyen, centrer par exemple une colonne dans sa rangée avec ml-auto et mr-auto comme on l’aurait fait en css avec margin-left : auto et margin-right : auto.
Alignement vertical des colonnes
- align-items-start : alignement vers le haut.
- align-items-center : alignement au milieu.
- align-items-end : alignement vers le bas.
Alignement vers le haut :
Alignement au milieu :
Alignement vers le bas :
Que faire si je veux qu’une seule colonne soit centrée verticalement ?
Class : align-self-center
On utilise la classe : align-self-center (comme avec le contenu voir plus haut) et on le fait non plus sur la rangée (.row) mais sur la colonne (.col) que l’on veut centrer.
Dans l’exemple ci-dessous on centrer verticalement la colonne 2 uniquement :
Alignement à la fois horizontal et vertical :
Rappel :
Pour aligner une colonne horizontalement on ajoute à la rangée la classe :
justify-content-start/center/end.
Pour aligner une colonne verticalement on ajoute à la rangée la classe :
align-items-start/center/end
Dans cet exemple, nous voulons aligner la colonne horizontalement à droite et verticalement au centre.
Nous allons tout simplement utiliser les deux classes (horizontal et vertical) dans la rangée (.row) pour obtenir l’alignement de la colonne que l’on désire.
Manfred
23 Jan 2019Merci pour l’apprentissage