Un breakpoint définit une taille d'écran pour laquelle l'affichage du site change.
Par exemple, on peut
définir un breakpoint à 640px
et faire en sorte que:
en dessous de 640px, les articles s'affichent sur une seule colonne
à partir de 640px, les articles s'affichent sur deux colonnes
Bootstrap définit 4 breakpoints:
La grille Bootstrap a une approche mobile first. On commence par créer la grille pour mobile, puis on ajoute des classes uniquement s'il y a des changements au breakpoint.
Afin de modifier la largeur des colonnes selon les breakpoints, on ajoute l'abréviation du breakpoint dans la classe.
Par exemple, pour la colonne
<div class="col-12 col-md-6 col-lg-8">...</div>
La largeur sera la suivante selon les tailles d'écran:
<aside> ⬅️ La grille
</aside>
<aside> ➡️ Offset - décaler des colonnes
</aside>