Bootstrap, le système de grille

Le système de grille de bootstrap permet de structurer les blocs d’information dans la page. C’est un des outils les plus utiles pour démarrer un projet.

Des classes associés à des tags

Pour utiliser Bootstrap, ou tout autre framework css d’ailleurs, on associe des classes à des éléments de la page. La connaissance des noms classes et de leur usage est donc obligatoire. Bootstrap est donc constitué d’un ensemble de fichiers css et js, ET une documentation abondante sur son site.

Le container

La classe .container permet de réduire la largeur du contenu à une taille fixe (1140px pour les écrans de plus de 1200px, 960px pour les écrans de plus de 992px, etc.). Ces tailles sont réglées avec des medias queries pour un design toujours fluide.

       <div class="container">
           <h1>Hello, world!</h1>
       </div>

Si on veut une occupation totale de la largeur de la page, on emploiera la classe .container-fluid

La grille bootstrap : la classe col

Structurer la page en colonnes est un besoin élémentaire pour la mise en page de site web. Les premiers frameworks servaient d’ailleurs principalement à ça.
Boostrap dans sa version 4 utilise un série de classes pour structurer la page. La plus simple est la classe .col.
Attention : outes les classes pemettant de structurer en grille la page doivent impérativement se placer à l’intérieur d’un élément comportant la classe .row, comme dans l’exemple ci-dessous :

<div class="container">
           <div class="row">
               <div class="col">deux colonnes</div>
               <div class="col">deux colonnes</div>
           </div>
           <div class="row">
               <div class="col">trois colonnes</div>
               <div class="col">trois colonnes</div>
               <div class="col">trois colonnes</div>
           </div>
</div>

Comme on le voit, la classe .col répartit la largeur de colonne automatiquement. C’est une classe pratique mais elle ne permet pas d’imposer une taille différente à certaines colonnes, ni de modifier la disposition dans d’autres tailles d’écran.

Plus de précision avec les unités

Pour pouvoir répartir de manière plus précise les tailles de colonne, on utilisera des classes plus précises. Pour des facilité de mémorisation, elles commencent toutes par .col- (vous pouvez vous reporter à la page de documentation spécifique sur le site de Bootstrap)

Bootstrap se base sur un système de 12 divisions de largeur. On associe un chiffre au préfixe .col- qui correspond au nombre de douzièmes que doit faire la largeur de l’élément.

<div class="container">
           <div class="row">
               <div class="col-6">deux colonnes</div>
               <div class="col-6">deux colonnes</div>
           </div>
</div>

Ici .col-6 indique à Bootstrap que l’on veux que l’élément occupe 6 douzièmes de la largeur, soit la moitié. A partir de cette logique, on peut donc donner des tailles spécifiques basées sur la grille.
12 est un bon chiffre : on peut faire deux colonnes de 6 unités, ou 3 colonnes de 4 unités, ou 4 colonnes de 3 unités, etc.

<div class="container">
           <div class="row">
               <div class="col-2">sidebar</div>
               <div class="col-6">colonne large</div>
               <div class="col-4">contenu secondaire</div>
           </div>
</div>

Évidemment, la somme des chiffres d’un rang doit être 12 pour occuper toute la largeur.

Encore plus de précision avec les breakpoints

Ce système permet de gérer les différentes largeurs de colonnes, mais ne permet pas de les faire varier en fonction des différentes tailles d’écran.
Un des besoins les plus courant est que des éléments rangés par 4 colonnes sur un grand écran doivent être affichés par deux sur un écran moyen et empilés les uns au dessus des autres sur petit écran.

On définit dans ce cas le comportement dans les différents breakpoints. Bootstrap propose pour faire ça des suffixes
- sm- pour les écrans supérieurs à 576 pixels
- md- pour les écrans supérieur à 768 pixels
- lg- pour les écrans supérieur à 992 pixels
- xl- pour les écrans supérieurs à 1200 pixels

par exemple, .col-md-4 signifie que l’élément occupera un tiers de la largeur de son parent lorsque la fenêtre a une taille de 768 pixels ou plus. On combine les différentes classes dans le même élément pour en faire varier la taille.

Ce qui donne pour un affichage de 4 colonnes, par exemple :

<div class="container">
           <div class="row">
               <div class="col-12 col-sm-6 col-lg-3">quatre colonnes</div>
               <div class="col-12 col-sm-6 col-lg-3">quatre colonnes</div>
               <div class="col-12 col-sm-6 col-lg-3">quatre colonnes</div>
               <div class="col-12 col-sm-6 col-lg-3">quatre colonnes</div>
           </div>
       </div>

On définit le comporte depuis la plus petite taille de fenêtre vers la plus grande.
Les classes disent ici que :
1) l’élément occupe toute la largeur sur petit écran ou plus (.col-12)
2) l’élément occupe la moitié de la taille sur écran supérieur à 576 pixels ou plus (.col-sm-6)
3) l’élément occupe un quart de la largeur sur écran de plus de 992 pixels ou plus (.col-lg-3)

Cacher des éléments dans certaines tailles
Il est possible aussi de cacher certains éléments à certaines tailles d’écran.
Une classe spécifique .d permet de changer le display (d’où ce préfixe).

Reportez-vous à la documentation sur les display, voici un exemple cachant une colonne sur petit écran :

<div class="container">
           <div class="row">
               <div class="col-4 col-md-2">sidebar</div>
               <div class="col-8 col-md-6">colonne large</div>
               <div class="col-md-4 d-none d-md-block">contenu secondaire</div>
           </div>
</div>

.d-none cache l’élément sur toute les tailles, puis .d-md-block rend l’élément visible pour les tailles supérieures à 768 pixels. On doit veuiller à changer les tailles des autres éléments pour qu’ils occupent ensemble toute la largeur lorsque l’élément n’est pas affiché.