Retirer l’offset dans une grille responsive avec Twitter Bootstrap

Twitter Bootstrap et l'offset 0

Cette fois, je vous propose une astuce, ou plutôt une clarification, d’un point qui n’est pas documenté sur le site de référence de Twitter Bootstrap, à propos des offsets dans les grilles responsive.

Un petit rappel sur les grilles responsive

Les grilles responsive de Twitter Bootstrap permettent d’architecturer la page, ou chaque partie d’une page Web sous forme de colonnes.

En plus de cela, il est possible pour chaque colonne de définir son comportement selon l’équipement sur lequel la page est affichée.
En clair, avec le même contenu, Bootstrap offre la possibilité de définir des dispositions différentes si le visiteur consulte votre site avec un smartphone, une tablette ou un ordinateur avec un écran plus ou moins grand.

Tout cela est défini par des classes CSS, par exemple :

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  Cellule 1
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  Cellule 2
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  Cellule 3
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  Cellule 4
</div>

Ce code HTML affiche quatre <div>, chacun ayant ses classes CSS définies.

La classe col-lg-3 signifie que sur les écrans larges (au moins 1200px), la cellule aura une largeur de 25% (soit trois douzièmes) de son contenant :

Twitter Bootstrap et l'offset 0 : quatre colonnes sur grand écran
Sur grand écran
La classe col-md-4 : sur écrans d’ordinateur entre 992 et 1199px, le contenu aura une largeur d’un tiers de son contenu (quatre douzièmes) :

Twitter Bootstrap et l'offset 0 : quatre colonnes sur petit écran
Sur petit écran
La classe col-sm-6 : le plus souvent sur tablette, en tout cas sur un écran entre 768 et 991px, le contenu aura une largeur de la moitié de celle de son contenant :

Twitter Bootstrap et l'offset 0 : quatre colonnes sur tablette
Sur tablette
Enfin, la classe col-xs-12 : sur smartphone, la colonne fera la totalité de la largeur :

Twitter Bootstrap et l'offset 0 : quatre colonnes sur smartphone
Sur smartphone

Les offsets de Twitter Bootstrap

Il est également possible d’indiquer à Bootstrap de laisser un espace avant d’afficher une colonne. Il s’agit de l’offset.

Encore une fois, il peut être défini pour chaque résolution. Par exemple pour afficher trois cellules :

  • sur la même ligne sur les écrans d’ordinateur
  • les deux premières cellule sur la première ligne et la troisième en dessous, et surtout : centrée
  • une par ligne sur smartphone

L’affichage sur écrans d’ordinateur et smartphone ressemble à ce que nous avons vu plus haut.

Pour l’affichage sur tablette, une solution est d’utiliser les offsets.

Voilà comment afficher les deux premières cellules :

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  Cellule 1
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
  Cellule 2
</div>

Jusque là, rien de nouveau.

Sur tablette (col-sm), la troisième cellule doit faire la moitié (six douzièmes) de la largeur, en laissant trois douzièmes vides avant et après : col-sm-6 col-sm-offset-3 (l’espace après est attribué automatiquement).

Le code de cette troisième cellule :

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col col3 col-sm-offset-3">
  Cellule 3
</div>

Ici, col-sm-offset-3 sert à laisser un espace d’un quart de la largeur du contenant avant la cellule.

Le résultat sur tablette :

Twitter Bootstrap et l'offset 0 : sur tablette, la troisième cellule est bien centrée
Sur tablette, la troisième cellule est bien centrée
Parfait… ou presque…

Le problème

Voilà le résultat sur les écrans d’ordinateur, la troisième cellule n’est pas sur la première ligne :

Twitter Bootstrap et l'offset 0 : sur grand écran, la troisième cellule n'est pas alignée
Sur grand écran, la troisième cellule n’est pas à sa place
La raison : les offsets sont appliqués sur la résolution demandée (ici : sm, c’est-à-dire la tablette), mais aussi sur les résolutions supérieures.

Mais comment définir un offset nul pour un affichage plus grand que celui d’une tablette ?

La solution

Pour que la troisième cellule ne soit plus affectée par le changement d’offset pour les écrans d’ordinateur, il suffit de lui indiquer un offset de… 0. Oui, c’est simple à dire, mais ce n’est pas vraiment documenté…

Ainsi, ajouter col-md-offset-0 suffit, comme les résolutions supérieures sont affectées automatiquement.

La dernière cellule devient :

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 col col3 col-sm-offset-3 col-md-offset-0">
  Cellule 3
</div>

Le résultat :

Twitter Bootstrap et l'offset 0 : sur grand écran avec un offset corrigé
Sur grand écran avec un offset corrigé

Le mot de la fin

Je rappelais il y a peu que lire la documentation était un principe de base. Mais quelquefois elle peut présenter des lacunes (globalement la documentation de Twitter Bootstrap est tout de même bien faite). Dans ce cas, il ne reste que la méthode empirique et la lecture du code.

Cet article vous a été utile ? Partage it !

Une réflexion au sujet de « Retirer l’offset dans une grille responsive avec Twitter Bootstrap »

  1. Un grand merci pour ce post !
    J’en ai écumé des docs et des posts en anglais sur ce tout petit sujet (mais sujet qui m’a pris la tête d’une force !) sans jamais trouver de réelle réponse à mon questionnement. Et la réponse est limpide, simplissime (comme souvent), expliquée super clairement et en français, je vous prie. La classe !
    La réponse est toute bête comme souvent : on annule l’effet précédemment induit avec un « col-md-offset-0″… Et là j’me dis : mais pourquoi j’y ai pas pensé plus tôt !!!! Grrrr….
    Bravo et encore merci !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.