Comment décaler des colonnes sur une grille de Bootstrap 5 ?

Nous allons voir dans cette leçon comment faire pour décaler des colonnes avec Bootstrap 5 et créer des grilles ou maquettes plus complexes que celles que nous avons vues jusqu’à présent.

Ce cours fait suite aux trois leçons précédentes :

Décaler des colonnes

Créons deux colonnes classiques l’une occupant un espace de 6 colonnes et l’autre de 4 colonnes le tout avec un breakpoint de 768px.

Pour rappel un breakpoint de 768 px signifie qu’en dessous de cette taille d’écran les colonnes ne situeront plus côte à côte, mais les unes en dessous des autres.

Les classes utilisées :

.col-md-6 = la première colonne doit occuper un espace de 6 colonnes tant que la taille de l’écran et égal ou supérieur à 768px, en dessous de cette résolution la colonne occupera la totalité de l’espace soit 12 colonnes.

.col-md-4 = même chose hormis que l’espace occuper est de 4 colonnes.

La grille de Bootstrap comprenant 12 colonnes, il nous restera donc un espace à droite de 2 colonnes.

6 + 4 = 10. 12 – 10 = 2.

Disons maintenant que l’espace à droite n’est pas très esthétique et que nous préférerions nous servir de cet espace pour créer un décalage entre les colonnes 1 et 2.

Pour ce faire nous allons utiliser la classe .offset suivie par le nombre de colonnes que l’on souhaite décaler. Dans notre exemple, il ne nous reste que deux colonnes de libres donc le décalage ne peut être que de 1 ou 2 colonnes.

Nous allons appliquer la classe .offset a la colonne 2, car le décalage se fait de la gauche vers la droite.

Si on avait appliqué le décalage sur la colonne 1, cela aurait créé un décalage à gauche de cette même colonne.

Reprenons notre exemple qui crée un décalage entre les deux colonnes et voyons ce qui se passe si l’on rétrécit l’écran pour que nos colonnes se positionnent les unes en dessous des autres.

Nous sommes d’accord, ce n’est pas très esthétique, pour remédier à ça on va simplement demander à Bootstrap de ne pas appliquer le décalage lorsque les colonnes sont en dessous du point de transition.

Comme notre colonne à un point de transition a 768px (crée avec la classe .md) nous allons rajouter à la classe .offset le breakpoint .md

.offset-md-2 = ne crée le décalage de deux colonnes qu’à partir du point de transition de 768px.