Apprenez le système de grille Bootstrap 4 en 10 minutes

Le système Bootstrap 4 Grid est utilisé pour les mises en page réactives.

Une mise en page réactive représente la façon dont les éléments s'alignent dans la page sur différentes résolutions. Il est important que vous compreniez comment utiliser la grille avant de vous renseigner sur tout autre composant Bootstrap 4, car quel que soit l'élément que vous utilisez, vous devrez le placer quelque part sur l'écran.

Commençons!

Table des matières

  • Conteneurs Bootstrap 4
  • Bootstrap 4 lignes
  • Bootstrap 4 colonnes
  • Lectures complémentaires

La grille Bootstrap 4 se compose de conteneurs, de lignes et de colonnes. Nous allons les prendre un par un et les expliquer.

Conteneurs Bootstrap 4

Un conteneur Bootstrap 4 est un élément avec la classe .container. Le conteneur est la racine du système de grille Bootstrap 4 et il est utilisé pour contrôler la largeur de la mise en page.

Le conteneur Bootstrap 4 contient tous les éléments d'une page. Cela signifie que votre page doit avoir la structure suivante: d'abord le corps de la page HTML, à l'intérieur de celui-ci, vous devez ajouter le conteneur et tous les autres éléments à l'intérieur du conteneur.

 ... 

La .containerclasse simple définit la largeur de la mise en page en fonction de la largeur de l'écran. Il place le contenu au milieu de la page en l'alignant horizontalement. Il y a un espace égal entre le conteneur Bootstrap 4 et les bords gauche et droit de la page.

La .containerlargeur diminue à mesure que la largeur de l'écran se rétrécit et devient pleine largeur sur mobile. La largeur du conteneur est définie dans la bibliothèque Bootstrap 4 pour chaque taille d'écran. Vous pouvez voir les tailles exactes ici.

Un conteneur pleine largeur occupe 100% de la taille de l'écran, quelle que soit la largeur de l'écran. Pour l'utiliser, vous devez ajouter la classe. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Vous pouvez voir le CodePen ici.

Pour voir les différences entre les deux types de conteneurs, vous pouvez ouvrir le stylet dans votre console et basculer entre les tailles d'écran.

Bootstrap 4 lignes

Bootstrap 4 lignes sont des tranches horizontales de l'écran. Ils ne sont utilisés que comme wrappers pour les colonnes. Pour les utiliser, vous avez besoin de la .rowclasse.

 ... 

Voici les éléments les plus importants à retenir à propos de Bootstrap 4 lignes:

  • Ils ne sont utilisés que pour contenir des colonnes. Si vous placez d'autres éléments dans la ligne avec des colonnes, vous n'obtiendrez pas le résultat attendu.
  • Ils doivent être placés dans des conteneurs. Si vous ne le faites pas, vous obtiendrez un défilement horizontal sur votre page. Cela se produit parce que les lignes ont des marges négatives à gauche et à droite de 15. Le conteneur a des rembourrages de 15 px afin de neutraliser les marges.
  • Les colonnes doivent être des enfants de la ligne. Sinon, ils ne s'aligneront pas. Les lignes et les colonnes sont créées pour fonctionner ensemble dans cette hiérarchie stricte.

Bootstrap 4 colonnes

Nous pouvons maintenant accéder à la belle partie de ce tutoriel, les colonnes Bootstrap 4. Les colonnes sont super! Ils vous aident à diviser l'écran horizontalement.

Si vous placez une seule colonne dans votre ligne, elle occupera toute la largeur. Si vous ajoutez deux colonnes, elles prendront chacune 1/2 de la largeur. Et il en va de même pour n'importe quel nombre de colonnes.

 ... ... ... ... ... ... ... ... 

Vous pouvez voir le code en direct sur CodePen.

Remarque: les colonnes ne sont pas colorées. Je viens d'ajouter des couleurs pour une description plus attrayante visuellement / afin qu'elles soient jolies.

Définition des tailles des colonnes

L'utilisation de la .colclasse définit dynamiquement la largeur de la colonne. Cela signifie que selon le nombre de colonnes dans une ligne, la largeur d'une colonne sera la largeur du conteneur divisée par le nombre de colonnes.

Mais il existe une autre façon de définir les colonnes. Vous pouvez utiliser des classes pour les colonnes et définir leur taille.

Par défaut, la grille Bootstrap 4 se compose de 12 colonnes. Vous pouvez sélectionner n'importe quelle taille de 1 à 12 pour votre colonne. Si vous voulez 3 colonnes égales, vous pouvez utiliser .col-4pour chacune d'elles (car 3 * 4 cols chacune = 12). Ou vous pouvez définir différentes tailles pour eux. Voici quelques exemples:

 ... ... ... ... ... ... ... ... 

Vous pouvez voir le code en direct sur CodePen.

Si la somme des cols de votre ligne n'atteint pas 12, alors ils ne remplissent pas toute la ligne. Si la somme des colonnes dépasse 12, elle passera à la ligne suivante. La première ligne n'affichera que les premiers éléments dont la somme est égale ou inférieure à 12.

Définition de points d'arrêt pour les colonnes

Si vous prenez l'exemple ci-dessus et que vous souhaitez l'afficher sur mobile, vous risquez de rencontrer des problèmes. L'affichage de cinq colonnes sur mobile rendra le contenu illisible.

C'est là qu'entre en jeu l'un des composants Bootstrap 4 les plus puissants. Pour avoir différentes mises en page sur différents écrans, vous n'aurez pas besoin d'écrire des requêtes multimédias, mais vous pouvez utiliser les points d'arrêt de colonne.

Un point d'arrêt est une variable Bootstrap 4 qui représente une résolution d'écran. Lorsque vous spécifiez un point d'arrêt pour une classe, vous indiquez à la classe d'être active uniquement pour les résolutions qui sont au moins aussi grandes que le nombre que contient le point d'arrêt.

La classe la plus simple que nous allons découvrir est la .col-[breakpoint]classe. Lorsque vous utilisez cette classe, vous définissez le comportement des colonnes uniquement lorsqu'elles sont affichées sur des appareils dont la résolution est au moins égale au point d'arrêt défini. Jusqu'au point d'arrêt donné, vos colonnes s'aligneront verticalement par défaut. Et après votre point d'arrêt, ils s'aligneront horizontalement à cause de la classe.

Bootstrap a 4 points d'arrêt que vous pouvez utiliser:

  • .col-sm pour les téléphones mobiles plus grands (appareils avec des résolutions ≥ 576px);
  • .col-md pour les comprimés (≥768px);
  • .col-lg pour les ordinateurs portables (≥992px);
  • .col-xl pour les ordinateurs de bureau (≥1200px)

Supposons que vous souhaitiez afficher deux colonnes l'une après l'autre verticalement sur de petits écrans et sur la même ligne sur des écrans plus grands. Vous devrez spécifier le point d'arrêt où les colonnes vont sur la même ligne.

Dans notre exemple, nous utiliserons le .col-lgpoint d'arrêt et verrons à quoi ressemblent les colonnes sur différents écrans. Pour les résolutions inférieures au point d'arrêt donné (<992px), les colonnes seront affichées verticalement. Cela signifie que sur les appareils mobiles et les tablettes, les colonnes ressembleront à ceci:

Et pour les appareils dont la résolution est supérieure ou égale au point d'arrêt (≥992px), les colonnes iront sur la même ligne. Cela signifie que sur les ordinateurs portables et les ordinateurs de bureau, vous obtiendrez ce résultat:

 ... ... 

Vous pouvez voir le code en direct sur CodePen.Si vous ouvrez le Codepen dans une autre fenêtre et voyez la page à différentes résolutions, vous verrez les colonnes changer leur positionnement.

Si vous vouliez que les 2 colonnes aillent sur la même ligne en commençant par des téléphones portables plus grands, vous utiliseriez .col-sm, pour les tablettes .col-mdet pour les très grands écrans .col-xl.

Définition des tailles et des points d'arrêt pour les colonnes

Vous pouvez combiner les tailles et les points d'arrêt et utiliser une seule classe avec le format .col-[breakpoint]-[size].

Par exemple, si vous souhaitez que trois colonnes de tailles différentes s'alignent sur une ligne commençant par la résolution de l'ordinateur portable, vous devez procéder comme suit:

 ... ... ... 

Vous obtiendrez ce résultat sur les résolutions <992px:

Et pour les écrans ≥992px:

Encore une fois, vous pouvez voir le code en direct sur CodePen.

Mais que se passe-t-il si vous souhaitez afficher une colonne par ligne sur de petites résolutions mobiles, deux colonnes par ligne sur des tablettes et quatre sur des ordinateurs portables ou des appareils avec des résolutions plus élevées?

Ensuite, vous ajoutez plusieurs classes pour une seule colonne pour décrire le comportement de chaque résolution. En utilisant plusieurs classes, vous spécifiez que le contenu occupera six emplacements sur les tablettes et trois sur les ordinateurs portables.

 ... ... ... ... 

Le résultat apparaîtra comme ceci sur les tablettes:

Et comme ça sur les ordinateurs portables et les résolutions plus élevées:

Cet exemple est également en ligne sur CodePen.

À titre d'exercice, vous pouvez essayer de créer des lignes avec un nombre de colonnes différent en fonction de la taille de l'écran et vérifier le comportement dans la console de votre navigateur.

Colonnes de compensation

Si vous ne souhaitez pas que vos colonnes soient côte à côte, vous pouvez utiliser la classe .offset-[breakpoint]-[size]avec l'extension .col-[breakpoint]-[size].

L'utilisation de cette classe revient à ajouter une colonne vide avant votre colonne. Voici un exemple simple:

 ... ... 

Vous pouvez voir le code en direct sur CodePen.

Vous pouvez utiliser la classe sur n'importe quelle colonne de la ligne. Voici quelques exemples supplémentaires:

 ... ... ... ... ... 

Colonnes d'imbrication

Cela peut paraître surprenant, mais vous pouvez ajouter une ligne dans une colonne!

La ligne en question (qui aura la largeur de sa colonne parente) sera alors divisée en 12 colonnes (plus petites) que vous pourrez référencer à travers les .col-* classes.

Jetons un coup d'œil à ce qui se passe lorsque nous insérons une nouvelle ligne dans une colonne:

 ... ... ... ... 

Vous pouvez voir le code en direct sur CodePen.

Sachant cela, vous pouvez aller à plusieurs niveaux pour organiser vos informations. Les colonnes vous fourniront un moyen simple de gérer votre espace.

Cela résume les connaissances de base concernant le système de grille réactif Bootstrap 4. Si vous avez des questions, n'hésitez pas à me le faire savoir dans les commentaires, je me ferai un plaisir de vous répondre.

Lectures complémentaires

Si vous avez plus de temps, voici quelques ressources utiles:

  • Documentation officielle de la grille de GetBootstrap
  • Tutoriel vidéo de Scrimba

Cet article a été initialement publié sur le blog BootstrapBay. Il fait partie d'une plus grande série de didacticiels Bootstrap 4 appelés 14 Days of Bootstrap 4. Si vous souhaitez continuer à découvrir les composants Bootstrap 4, ces articles sont un bon point de départ.

Et si vous souhaitez démarrer votre développement avec un modèle Bootstrap, vous pouvez consulter notre marché.

Mais avant d'aller plus loin, prenez un moment pour célébrer vos compétences nouvellement acquises !?