Add extra / edit existing breakpoints outside of bower_components

I want to create an extra breakpoint xxl and edit the xl value.

I’ve the below code in bower_components/bootstrap/scss/bootstrap-grid.scss but how can i add the breakpoint and edit the xl value in assets/styles/components/_variables.scss or similar?

// Grid breakpoints
//
// Define the minimum and maximum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 544px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
) !default;

thanks!

You literally copy/paste that into _variables.scss. Example from one of my projects:

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 630px,
  // Medium screen / tablet
  md: 670px,
  // Large screen / desktop
  lg: 868px,
  // Extra large screen / wide desktop
  xl: 1050px
) !default;

thanks btw - led me in the right direction.

I needed to add -

$container-max-widths: ( sm: 576px, md: 720px, lg: 940px, xl: 1140px, xxl: 1350px ) !default;

too.

D.