Bootstrap : grille partie 2 Alignement horizontal & vertical

bootstrap 4

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 contenu
alignement contenu

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.
align-item
Alignement contenu 2

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 :

align-item
align-item

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
Alignement contenu

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 gauche
alignement gauche

Alignement au centre :

alignement au centre
Alignement horizontal centre

Alignement à droite :

Alignement a droite
Alignement horizontal droite

Alignement avec un espacement :

alignement avec espace
Alignement horizontal around

Alignement gauche et droite :

alignement gauche et droite
Alignement horizontal between

On récapitule

alignement

Décalage des colonnes :

Classe : offset

Grace à la classe offset vous pouvez décaler des colonnes sur une grille.

Exemple sans décalage :
Alignement
decalage colonne

Exemple avec décalage :

offset
Ici entre l’élément 1 et 2 il y a un espace de 4 colonnes.

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
MARGE AUTO

Alignement vertical des colonnes

Class : align-items s’ajoute à la rangée (.row)
  • 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
Alignement vertical haut

Alignement au milieu :

alignement milieu
Alignement vertical milieu

Alignement vers le bas :

Alignement
Alignement vertical 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
align-self-center

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.

alignement
Alignement

Cet article a 1 commentaire

  1. Merci pour l’apprentissage

Laisser un commentaire