Retenir : lorsqu’on redéfinit ponctuellement la valeur de la variable $grid-columns pour créer une batterie de styles spécifique à un affichage en x (autre que la valeur par défaut qui est 12) colonnes, il faut penser à redéclarer systématiquement la valeur par défaut juste après. Cf. l’exemple ci-dessous.

Source : Bootstrap: Advanced Grid Tricks (sous-partie Redefining grid-columns).

Le truc ici est de réaliser qu’SCSS parse de haut en bas et qu’à partir du moment où il atteint la partie de notre code où nous cherchons à redéfinir la variable $grid-columns les propriétés précédentes ont déjà été générées.

Si nous changeons la valeur de $grid-columns à 5 pour générer une batterie de styles spécifiques pour une grille 5 colonnes et que nous remettons cette valeur à la valeur par défaut (12) ensuite, nous n’obtiendrons pas d’effets de bord.

Dans l’exemple ci-dessus, des classes .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4 et .col-xs-5 seront générées pour créer une mise en page sur 5 colonnes (réparties sur 100% de largeur) par rangée.

Créer une batterie de classes pour une grille 5 colonnes