Breakpoints

Afin de bien comprendre la grille Bootstrap, il est impératif de connaitre ses breakpoints.

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 📱.

  • Small les appareils mobiles en mode landscape.

  • Medium les tablettes en mode portrait.

  • Large les tablettes en mode landscape.

  • X-large les laptops 💻.

  • XX-large les moniteurs externes 🖥.