Créer des colonnes dans les grilles Bootstrap et gérer leur taille

Dans cette leçon, nous allons mettre en pratique les notions abordées au cours des leçons précédentes et apprendre à créer des design complexes en utilisant le système des grilles Bootstrap.

Nous allons également illustrer concrètement comment créer des designs et grilles responsives en utilisant les classes Bootstrap adaptées.

Pour cela, nous allons commencer par créer une grille très simple et complexifier son design au fur et à mesure.

 

Création d’une grille avec des colonnes de même largeur

Pour rappel, les grilles Bootstrap sont basées sur le flexbox et une grille va toujours être composée de 12 colonnes de base.

Pour créer une grille, il suffit de définir un élément conteneur en passant l’une des classes .container ou .container-fluid à un élément HTML puis de définir une ligne en passant une classe .row à un autre élément dans le conteneur. On va ensuite pouvoir personnaliser nos lignes et notamment créer des colonnes personnalisées grâce aux classes de type .col-*.

Commençons par créer une grille très simple avec une ligne et trois colonnes qui vont occuper la même largeur. Pour cela, on commence par définir un élément conteneur en passant une classe .container à un élément puis un définit notre ligne en passant une classe .row à un autre élément enfant de notre conteneur. Finalement, dans notre élément .row, on va créer trois éléments et on va passer une classe .col à chacun.

Code :

See the Pen
Bootstrap 1.4.1
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.1
by Pierre (@pierregiraud)
on CodePen.

La classe .col permet de définir des colonnes personnalisées pour une ligne sans indiquer de taille explicite pour ces colonnes.

Ici, je vous rappelle que la classe .row applique un display : flex aux éléments qui la portent. Nos lignes sont donc des conteneurs flexibles et leurs enfants directs, c’est-à-dire les éléments portant la classe .col sont des éléments flexibles.

En passant une classe .col à chaque élément de notre ligne, ceux-ci vont se partager l’espace équitablement dans la ligne. Ainsi, si une ligne possède trois éléments auxquels on a passé une classe .col, chacun des trois éléments occupera un espace en largeur équivalent à 12 / 3 = 4 colonnes de base de la ligne.

Dans l’exemple ci-dessus, notre grille ne contient qu’une seule ligne. On peut ajouter autant de lignes qu’on le souhaite dans une grille Bootstrap. Retenez bien que chaque ligne agit comme un conteneur pour les colonnes. Ainsi, les colonnes qu’on va créer dans une ligne vont être totalement indépendantes des colonnes créées dans une autre ligne.

Code :

See the Pen
Bootstrap 1.4.2
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.2
by Pierre (@pierregiraud)
on CodePen.

 

Création d’une grille avec des colonnes de tailles différentes

Bien souvent, nous voudrons que les différents éléments de notre grille occupent des largeurs différentes. On va pouvoir faire cela en indiquant le nombre de colonnes de base que doit occuper chaque colonne qu’on va créer dans la ligne.

Pour indiquer explicitement le nombre de colonnes de base que doivent occuper nos colonnes personnalisées, nous allons plutôt utiliser les classes .col-1, .col-2.col-12.

En passant une classe .col-1 à un élément, on indique qu’on souhaite créer une colonne d’une taille équivalente à celle d’une colonne de base des grilles Bootstrap. En passant .col-2 on va créer une colonne qui va occuper l’espace de deux colonnes de base et etc.

Code :

See the Pen
Bootstrap 1.4.3
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.3
by Pierre (@pierregiraud)
on CodePen.

Bien évidemment, une ligne ne peut pas par définition contenir plus de 12 colonnes puisque nos colonnes personnalisées sont construites à partir des 12 colonnes de base des grilles Bootstrap.

Dans le cas où on essaie de créer des colonnes dans une ligne en utilisant plus de 12 colonnes de base, alors les colonnes personnalisées ne rentrant pas dans la ligne iront se positionner en dessous des précédentes (elles iront se positionner à la ligne).

Code :

See the Pen
Bootstrap 1.4.4
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.4
by Pierre (@pierregiraud)
on CodePen.

Notez qu’il est tout à fait possible d’utiliser un mélange d’éléments utilisant .col et .col-1, .col-2.col-12 dans une même ligne. Dans ce cas-là, les colonnes créées dont la taille est explicitement mentionnée occuperont l’espace en premier puis l’espace restant sera distribué entre les colonnes définies avec la classe .col.

Code :

See the Pen
Bootstrap 1.4.5
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.5
by Pierre (@pierregiraud)
on CodePen.

La deuxième ligne de la grille ci-dessus contient trois colonnes personnalisées. On ne définit de largeur explicite que pour une seule de ces trois colonnes, qui va donc déjà occuper sa place (équivalente à 6 colonnes de base) puis l’espace restant (équivalent à 12 – 6 = 6 colonnes de base) va être partagé entre les deux autres colonnes personnalisées de la ligne.

Enfin, un dernier cas à connaitre par rapport à la distribution des colonnes dans une ligne de grille : si le contenu d’une colonne ne tient pas dans l’espace qui lui a été originellement attribué, l’espace dans la ligne sera réarrangé pour que la colonne en question ait une place suffisante à l’affichage de son contenu et il pourra y avoir un passage à la ligne automatiques des autres colonnes personnalisées.

Code :

See the Pen
Bootstrap 1.4.6
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.6
by Pierre (@pierregiraud)
on CodePen.

 

Modifier la disposition des colonnes en fonction des écrans : le responsive

L’un des intérêts majeurs d’utiliser Bootstrap 4 est que cette version du framework a été développée en pensant à l’affichage sur mobile en premier et donc possède de nombreux outils permettant d’adapter nos designs en fonction de la taille de l’écran (ou plus exactement de la fenêtre) de nos visiteurs.

Avec les grilles, on va notamment pouvoir spécifier qu’une ligne doit posséder tel nombre de colonnes personnalisées qui vont chacune occuper tel nombre de colonnes de base pour une taille de fenêtre donnée puis que ces colonnes personnalisées doivent être réorganisées et occuper plutôt la place de tel autre nombre de colonnes de base pour cette colonne, telle autre nombre pour telle autre, etc. pour une autre taille de fenêtre.

En effet, les grilles Bootstrap vont avoir des tailles différentes en fonction de la taille de la fenêtre de vos visiteurs puisqu’elles dépendent de la taille du conteneur défini avec .container ou .container-fluid qui va dans les deux cas être un conteneur flexible.

Ainsi, les colonnes personnalisées d’une ligne vont pouvoir occuper un nombre différent de colonnes de base selon la taille de la fenêtre de chaque visiteur.

Cette fonctionnalité va être très utile pour proposer un affichage optimisé pour différentes tailles de fenêtre. Par exemple, on pourra vouloir qu’un élément occupe une largeur égale à 3 colonnes de base pour un grand écran puis à 6 colonnes pour une taille d’écran 2 fois plus petite par exemple afin que la taille effective de l’élément ne soit pas modifiée.

Pour faire cela, on va pouvoir utiliser les classes .col-sm, .col-md, .col-lg et .col-xl en plus de .col.

Ces classes sont liées aux breakpoints définis par Bootstrap. L’idée ici est très simple : selon la taille de la fenêtre, les styles d’une classe vont être appliqués prioritairement par rapport à ceux des autres. Ces classes vont s’appliquer pour les tailles de fenêtre suivantes :

Extra small (< 576px)Small (>= 576px)Medium (>= 768px)Large (>= 992px)Extra large (>= 1200px)
Largeur maximale du conteneurAucune (auto)540px720px960px1140px
Nombre de colonnes12
Largeur de gouttière30px (15px à gauche + 15px à droite)

Nous connaissons déjà la classe simple .col. Comme Bootstrap 4 a été construit sur le principe du « mobile first », c’est la classe par défaut qui va s’appliquer pour toutes les tailles de conteneur si nous ne précisons pas de règle plus précise.

Par ailleurs, vous pouvez noter qu’il n’est pas strictement obligatoire d’utiliser une classe .col avec les éléments de ligne tant qu’au moins une autre classe .col-sm, .col-md, .col-lg ou .col-xl a été définie.

Dans ce cas-là, les éléments occuperont tout l’espace disponible dans la ligne pour les tailles de fenêtres où aucune instruction n’a été donnée. Regardez plutôt l’exemple suivant :

Création de colonnes Bootstrap responsive

Résultat avec une fenêtre de taille inférieure à 768px :

Affichage d'une grille Bootstrap avec colonnes responsive sur petits écrans

Résultat avec une fenêtre de taille supérieure à 768px :

Affichage d'une grille Bootstrap avec colonnes responsive sur grands écrans

Code :

See the Pen
Bootstrap 1.4.7
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.7
by Pierre (@pierregiraud)
on CodePen.

On passe ici des classes .col-md-* à nos éléments de ligne. Cela signifie qu’on crée des colonnes personnalisées bien pour un affichage dans des fenêtres de taille supérieure à 768px. Pour ces fenêtres là, la deuxième colonne personnalisée occupera 6 colonnes de base et les 6 colonnes restantes seront réparties équitablement entre la 1ère et la 3ème colonne de la ligne.

Pour des fenêtres de taille inférieure à 768px, en revanche, aucune taille ni comportement n’a été explicitement définie pour nos colonnes personnalisées. Pour ces tailles de fenêtre, chaque colonne personnalisée occupera donc par défaut tout l’espace disponible dans la ligne ce qui signifie que chaque colonne poussera les suivantes à la ligne.

Pour tester directement cela, n’hésitez pas à ouvrir ce code directement dans CodePen ou à le recopier dans votre éditeur de texte. Ensuite, tentez de redimensionner la taille de votre fenêtre pour bien observer et comprendre comme les colonnes changent de taille en fonction de la taille de la fenêtre.

Ce que vous devez bien retenir ici est que les classes .col-sm, .col-md, .col-lg et .col-xl vont devenir prioritaires chacune à leur tour A PARTIR d’une certaine taille d’écran.

Ainsi, par exemple, si on applique seulement une classe .col-sm- pour définir nos colonnes, alors cette classe définira le comportement des colonnes pour TOUS les écrans de taille supérieure à 576px.

En revanche, si maintenant on attribue deux classes .col-sm- et .col-lg- par exemple pour définir nos colonnes, alors la taille de ces colonnes (le nombre de colonnes de base occupées par chacune d’entre elles) sera définie par la classe .col-sm- pour les écrans de taille supérieure à 576px jusqu’au breakpoint de 992px où c’est la classe .col-lg- qui va être prioritaire et indiquer les nouvelles dimensions des colonnes.

Illustrons immédiatement ce qu’on vient de dire avec un exemple pratique pour bien comprendre le principe :

Code :

See the Pen
Bootstrap 1.4.8
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.8
by Pierre (@pierregiraud)
on CodePen.

 

Définir automatiquement la largeur des colonnes en fonction de leur contenu

Si on souhaite que la place prise par les colonnes créées soit calculée automatiquement en fonction de leur contenu, on peut également utiliser les classes .col-{breakpoint}-auto plutôt que d’utiliser des classes avec des numéros.

Code :

See the Pen
Bootstrap 1.4.9
by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Bootstrap 1.4.9
by Pierre (@pierregiraud)
on CodePen.

Dans cet exemple, on demande à ce que la largeur occupée par la deuxième colonne soit déterminée par son contenu et que l’espace restant soit distribué équitablement entre les autres éléments pour les petites fenêtres. Pour les fenêtres de taille supérieure à 768px, en revanche, on demande à ce que chacune des trois colonnes occupe le même nombre de colonnes de base dans la ligne.

Laisser un commentaire