Add extra large breakpoint in Drupal Boostrap Theme (SASS starterkit)

For a site I needed another breakpoint for screens larger than 1200px. I went about overriding the Drupal Bootstrap theme to add an extra large ('XL') breakpoint with the width of 1500px. This was for the SASS starter kit.

To do this I needed to override the following files by adding the extra breakpoints and changing import paths to point to the overriding files:

  • _bootstrap.scss
  • _grid.scss
  • _mixins.scss
  • _responsive-utilities.scss
  • _variables.scss
  • mixins/_grid.scss
  • component/_navbar.scss

Please find a copy of the overriding scss files here:

https://github.com/web-assistant/bootstrap-xl-breakpoint