BreakpointsLes points d'arrêt (breakpoints) sont des dimensions déterminées qui affectent la présentation de votre mise en page en fonction de la taille des périphériques ou des fenêtres d'affichage dans Bootstrap.
Afin de bien comprendre la grille Bootstrap, il est impératif de connaitre ses breakpoints.
Pour bien comprendre la grille Bootstrap et être en mesure de déboguer facilement une mise en page l'utilisant, il est important de bien comprendre ses différents breakpoints. Soit les points où Bootstrap permet de changer la disposition des éléments sur une page.
Par défaut les breakpoints Bootstrap sont:
| BREAKPOINT | ABBRÉVIATION | DIMENSION |
|---|---|---|
| X-Small (par défaut) | moins de 576px | |
| Small | sm | 576px et + |
| Medium | md | 768px et + |
| Large | lg | 992px et + |
| Extra large | xl | 1200px et + |
| Extra extra large | xxl | 1400px et + |
Afin de faciliter le débogage, il est fortement suggéré d'ajouter ces breakpoints à l'inspecteur de votre navigateur.
Ces breakpoints ne font pas référence à des résolutions d'écrans d'appareils en particulier, mais plutôt à des groupes d'appareils.
Par exemple:
-
X-small vise les appareils mobiles en mode portrait 📱.
400x700 -
Small les appareils mobiles en mode landscape.
576x330 -
Medium les tablettes en mode portrait.
768x1024 -
Large les tablettes en mode landscape.
992x558 -
X-large les laptops 💻.
1200x675 -
XX-large les moniteurs externes 🖥.
1400x764