Bootstrap : comment utiliser les Media queries ?

Si vous souhaitez modifier certains éléments sur votre site pour les adapter en fonction de l'écran, vous pouvez reprendre les media queries de Bootstrap. Voici comment.

Le framework CSS Bootstrap est un framework conçu pour développer des applications qui fonctionnent aussi bien sur un smartphone que sur un ordinateur. Pour cela, Bootstrap a différentes tailles d'écran paramétrées et modifie l'affichage des éléments en fonction de ces tailles.

Si vous souhaitez modifier certains éléments sur votre site web pour les adapter en fonction de l'écran, vous pouvez reprendre les media queries qu'utilise Bootstrap pour y insérer vos directives. Voici les media queries de Bootstrap :

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Ces requêtes sont celles utilisées par Bootstrap depuis la version 3.3.5. Si vous utilisez une version antérieure, une taille supplémentaire est ajoutée, à 480px :

@media(max-width:480px){}

Bootstrap est un framework pensé en priorité pour le mobile, c'est pourquoi les requêtes sont rangées par ordre de taille en prenant la plus petite en premier. Insérez vos directives dans ces media queries pour ajuster des éléments comme, par exemple, la taille de la police.

Bootstrap