Breakpoints

2

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 🖥.
Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme