Bienvenue dans ce nouveau tutoriel Bootstrap qui montre Bootstrap Grid System – lignes et colonnes

Continuons à parler du système de grille Bootstrap et voyons comment l’utiliser pour créer des mises en page réactives. En particulier, nous verrons comment utiliser les classes row et col pour créer un contenu qui s’adapte à la taille de la fenêtre du navigateur ou de l’écran de l’appareil.

Dans l’article précédent, nous avons vu des conteneurs (conteneurs), l’un des éléments fondamentaux de Bootstrap. Aujourd’hui, nous allons voir comment insérer des lignes et des colonnes à l’intérieur pour créer notre propre grille personnalisée.

Pour créer une grille, vous devez d’abord insérer les lignes à l’intérieur d’un conteneur à l’aide d’une balise div avec la classe row et, à son tour, à l’intérieur des lignes, vous devez insérer les colonnes à l’aide de balises div avec la classe col-.

Bootstrap Grid System

Le système de grille Bootstrap divise le contenu de chaque ligne en 12 parties et par conséquent la largeur de chaque colonne doit être exprimée en douzièmes.

Les 12 parties dans lesquelles une ligne est divisée sont utilisées pour indiquer la largeur des colonnes. En pratique, 1 indique que la largeur de la colonne sera 1/12 de celle de la ligne, 2 sera 2/12, 6 sera 6/12 (soit 50%) et ainsi de suite.

De plus, en utilisant les points d’arrêt vus dans l’article précédent, nous avons pu influencer le comportement des colonnes et décider pour quels appareils elles doivent être placées côte à côte et pour lesquelles empilées.

Bien que le fonctionnement du système de grille puisse sembler complexe en surface, vous verrez qu’une fois compris le mécanisme, tout sera beaucoup plus simple.

Par exemple, si nous voulons créer une page Web divisée en trois colonnes, une large de 50 % de la fenêtre et les deux autres de 25 %, et que nous voulons que ces trois colonnes soient empilées pour les appareils plus petits qu’une tablette, c’est-à-dire avec une fenêtre d’affichage moins de 768 pixels, nous devrions écrire notre code HTML comme ceci :

Analysons les classes col-md-6 et col-md-3, utilisées pour créer les colonnes :

col- indique que la balise div représente une colonne ;
md est le point d’arrêt et est utilisé pour s’assurer que sur les appareils de moins de 768 pixels (c’est-à-dire moyen), les colonnes ne sont pas côte à côte mais empilées ;
les chiffres 6 et 3 sont utilisés pour indiquer la largeur de chaque colonne, qui dans ce cas sont respectivement 6/12 (50%) et 3/12 (25%) ;
Si vous souhaitez créer trois colonnes de même largeur, vous pouvez omettre la taille et simplement écrire :

Dans cet exemple, Bootstrap créera trois colonnes de même largeur.

Vous pouvez également omettre d’indiquer le point d’arrêt. Dans ce cas les colonnes ne seront empilées que si leur contenu ne permet pas un affichage correct sur les petits écrans.

Je vous conseille d’expérimenter en écrivant le code que vous venez de voir dans une page d’exemple et de modifier la taille de la fenêtre du navigateur pour voir le comportement des colonnes. Répétez les mêmes tests en modifiant les points d’arrêt et les dimensions.

Mélanger les classes des colonnes

Je vous rappelle que pour créer une colonne, vous devez utiliser une balise div avec la classe col- – dans une autre balise div avec la classe row.

Le système de grille Bootstrap vous permet également d’utiliser différentes classes préfixées par deux-points sur chaque balise div et d’obtenir une mise en page différente sur des appareils de différentes tailles.

Par exemple, essayons d’écrire le code suivant dans notre page de test :

Le résultat de l’exemple sera 4 colonnes côte à côte sur les fenêtres supérieures ou égales à moyennes (768px), tandis que sur les appareils supérieurs et égaux à petits (576px) mais inférieurs à moyens (768px), nous verrons les colonnes un et deux côté côte à côte et immédiatement au-dessous des colonnes trois et quatre côte à côte. Enfin sur les appareils xs (moins de 576px) les colonnes seront toutes empilées. Chargez la page dans votre navigateur et redimensionnez la fenêtre pour voir les colonnes changer de position.

La classe offset- – décale la colonne n/12 vers la droite. Par exemple en écrivant :

Nous afficherons une large colonne le 6/12 avec une marge de gauche de 3/12.

Grilles imbriquées

Dans la réalisation de certaines interfaces il pourrait être commode d’imbriquer les grilles. Pour ce faire, vous devez ajouter une nouvelle ligne, en utilisant la classe row, dans une colonne existante comme dans l’exemple ci-dessous :

Comme vous l’avez vu, le système de grille Bootstrap est un outil très puissant qui vous permet de créer des mises en page réactives complexes avec peu de code.

Dans les prochains articles nous verrons comment enrichir nos interfaces avec les différents composants Bootstrap, comment insérer une barre de navigation, personnaliser le menu, créer des diaporamas etc…