Bootstrap 4 - le système de grille

Bootstrap 4 utilise un système de grille basé sur flexbox et vous permet de construire jusqu'à 12 colonnes. Bien que vous ne soyez pas obligé d'utiliser ces 12 colonnes, assurez-vous que la somme des colonnes ne dépasse pas 12 ce qui vous permet également d'avoir des colonnes de largeur variée.
Le système de grille de bootstrap 4 est responsif c'est-à-dire qu'il s'adapte automatiquement en fonction de la taille de l'écran.

Système de grille et class

Laisser Bootstrap calculer automatiquement la largeur des colonnes :
Considérons le code suivant :

<div class="row">
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
   <div class="col"></div>
</div>

Avant tout propos, il faudra rappeler qu'il est important d'encadrer un groupe de colonnes dans une ligne donc entouré d'un bloc <div class="row"></div>. 

Pour revenir alors à notre exemple, Bootstrap calculera automatiquement la largeur de chaque colonne à part égale. Deux colonnes feront 50% de largeur chacune, 3 colonnes feront 33.33% et donc 4 colonnes donnera 25% de largeur chacune.

Dire explicitement à Bootstrap la largeur voulue :
Bootstrap 4 utilise 5 class dans son système de grille pour représenter approximativement les différentes tailles d'écran : 

  • col- : pour les très petits appareils avec une largeur d'écran inférieur à 576 pixels
  • col-sm- : pour les petits appareils avec une largeur d'écran égale ou supérieure à 576 pixels
  • col-md- : pour les appareils de taille moyenne avec une largeur d'écran égale ou supérieure à 768 pixels
  • col-lg- : pour les grands appareils avec une largeur d'écran égale ou supérieure à 992 pixels
  • col-xl- : pour les très grands appareils avec une largeur d'écran égale ou supérieure à 1200 pixels

Considérons le code suivant : 

<div class="row">
   <div class="col-sm-4"></div>
   <div class="col-sm-4"></div>
   <div class="col-sm-4"></div>
</div>

Pour rappel, la première valeur après col- précise la taille d'écran concernée et la deuxième valeur qui est un nombre représente la largeur.
Vous remarquerez que le total des nombres dans une ligne (row) fait 12 et ça sera toujours ainsi.
Dans notre exemple, nous avons 3 colonnes où chaque colonne prend comme largeur la fusion de 4 colonnes. Pour comprendre, considérez toujours qu'il y'a 12 colonnes dans une ligne donc lorsqu'on mentionne par exemple col-sm-6, cela veut dire que 6 colonnes ont été fusionnées en 1.

Donc on peut écrire aussi ceci : 

<div class="row">
   <div class="col-sm-9"></div>
   <div class="col-sm-3"></div>
</div>

Comme vous avez constaté, le total des nombres fait toujours 12.

Il est important de rappeler que pour créer des pages web dynamiques et flexibles, les différentes class peuvent être combinées dans leur utilisation.
Regardez ce code : 

<div class="row">
   <div class="col-sm-8 col-lg-9"></div>
   <div class="col-sm-4 col-lg-3"></div>
</div>

Expliquons ce code : 
col-sm-8 col-lg-9 : ici on dit simplement que ça sera une largeur de 8 colonnes sur les petits appareils (voir les class ci-dessus) mais sur les grands appareils, ça sera une largeur de 9 colonnes.

Petite précision, lorsqu'on disait que le total des nombres fait toujours 12, c'est vrai et il s'agit de la résolution d'écran concernée. Quand vous prenez le total des petits appareils (col-sm), ça fait 12 (8+4) et quand vous prenez celui des grands appareils (col-lg), ça fait également 12 (9+3).

Partager :
comments powered by Disqus

Suivez-moi sur Twitter

Copyright © 2010-2019 Lookman Design, tous droits réservés .