Système de Grille

Mise en page à 12 colonnes

Le système de grille de Bootstrap divise la page en 12 colonnes, offrant une structure de mise en page flexible et réactive. Cela permet aux développeurs de créer des conceptions visuellement attrayantes et bien structurées qui s'adaptent parfaitement à différentes tailles d'écran et appareils.

Classes de grille

• container: La classe container enveloppe et centre le contenu dans un conteneur de largeur fixe. Elle fournit des marges intérieures, des marges extérieures et assure un alignement correct du contenu;
• row: La classe row crée un groupe horizontal de colonnes. Elle sert de conteneur pour les colonnes, assurant un alignement et un espacement corrects entre elles;
• col: Les colonnes à l'intérieur d'une ligne sont définies en utilisant la classe col. Les développeurs spécifient la largeur des colonnes en utilisant des classes col telles que col-6, col-md-4, ou col-lg-3.

Design réactif

Le système de grille de Bootstrap est conçu pour être réactif, permettant au contenu de s'adapter dynamiquement en fonction de la taille de la fenêtre d'affichage et du type d'appareil. Les développeurs peuvent utiliser des classes de grille réactives comme col-md-6 ou col-lg-4 pour spécifier les largeurs de colonne pour différentes tailles d'écran, telles que les appareils moyens ou grands.

Remarque

Dans Bootstrap, les classes sm, md, lg, et xl représentent différentes tailles d'écran

Exemples

Exemple 1 : Mise en page de grille de base

Dans cet exemple, nous avons un conteneur avec une seule rangée contenant trois colonnes de largeur égale. Chaque colonne occupe une portion égale de la largeur de la rangée, résultant en une disposition horizontale avec trois colonnes.

Exemple 2 : Mise en page de grille réactive

Dans cet exemple, un conteneur a une rangée avec trois colonnes. Les deux premières colonnes (col-md-6) sont configurées pour occuper la moitié de la largeur de la rangée sur les écrans de taille moyenne et plus. La troisième colonne (col-md-12) est configurée pour occuper toute la largeur de la rangée sur les écrans de taille moyenne et plus. Cela garantit que la troisième colonne occupe toute la largeur de la rangée.

Résultat du comportement de la grille réactive