Dans notre exemple, nous allons chercher à ajouter un breakpoint col-xl-… pour des résolutions d’écran plus larges que col-lg.
Pour ce faire, il faudra éditer 4 fichiers :

  1. bootstrap/mixins/grid-framework.scss
  2. bootstrap/mixins/grid.scss
  3. bootstrap/variables.scss
  4. bootstrap/grid.scss

Une fois ces ajouts effectués, vous pourrez utiliser toute la batterie de mixins et de classes offerte par la grille Bootstrap pour les breakpoints XS, SM, MD, LG, mais également votre nouveau point de rupture XL !

mixins/grid-framework.scss

Rajouter en début de fichier la classe .col-xl-… dans le mixin make-grid-columns (arguments + boucle for) :

mixins/grid.scss

Rajouter en fin de fichier les mixins make-xl-column, make-xl-column-offset, make-xl-column-push, make-xl-column-pull (vous pouvez vous inspirer de la batterie de mixins déjà présente pour make-lg-…) :

variables.scss

Rajouter les Media queries breakpoints pour Extra Large screen / wide desktop :

Rajouter les Container sizes :

grid.scss

Rajouter un Container widths pour le breakpoint xl :

En toute fin de fichier, rajouter un Extra Large grid :