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 & 12 colonnes en "lg" car 12/12</div> <div class="col-md-6 col-lg-12">6 colonnes car 12/2 & 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 :
1 commentaire
Créer une Card avec Bootstrap 4 - MonBootstrapMonBootstrap
[…] Dans une nouvelle div nous ajoutons au même niveau la classe .block ainsi que la classe CSS de la Grid Bootstrap […]