Améliorer la gestion de votre grille

Il est parfois difficile de comprendre correctement le fonctionnement de la grille Bootstrap. Je suis bien d’accord avec vous sur ce point, il vous faudra un certain entrainement avant de maîtriser ses subtilités.

Comprendre la grille

Avec cette nouvelle version (Bootstrap 3), Bootstrap nous propose une réorganisation de la grille toujours plus orientée « Mobile First ». On peut facilement comprendre que nous devons utiliser des préfixes « xs », « sm », « md » ou bien « lg » pour définir la taille d’écran sur lequel votre contenu sera affiché.

Un exemple très simple :

« xs » veut dire « extra-small ». Cela veut donc dire que votre contenu HTML s’affichera sur un écran inférieur à 768 pixels de large. Cependant, il faut comprendre aussi que si vous ne définissez pas d’autre valeurs « sm », « md » ou « lg » votre contenu s’affichera aussi sur les écrans supérieurs à une largeur de 768 pixels!

Pour éviter les quiproquos je vous propose quelques astuces simples :

 
1) Je veux que ma div s’affiche sur les écrans de plus de 992px sur 6 colonnes et sur 12 colonnes sur les écrans de plus de 1200px

<div class="row">
<div class="col-md-6 col-lg-12">6 colonnes car 12/2 &amp; 12 colonnes en "lg" car 12/12</div>
<div class="col-md-6 col-lg-12">6 colonnes car 12/2 &amp; 12 colonnes en "lg" car 12/12</div>
</div>

important : Cela veut aussi dire que « xs » et « sm » afficheront 6 colonnes.

 
2) J’affiche un écart de 4 colonnes sur la gauche entre mes 2 divs avec « offset » en « xs »:

<div class="row">
    <div class="red col-xs-4">.col-xs-4</div>
    <div class="blue col-xs-4 col-xs-offset-4">.col-xs-4 .col-xs-offset-4</div>
</div>

Voir le résultat :