Bootstrap 4 Change Breakpoints

Question

I have an application where the design calls for a 1280 breakpoint from desktop to tablet, or, xl to lg respectively. However, Bootstrap itself has the xl breakpoint at 1200

Answer 1

Changing the $grid-breakpoints variable will work fine. Remember that you must import /bootstrap or the bootstrap/variables in the custom.scss, and then @import bootstrap after.

For example:

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px
);

Demo: https://codeply.com/go/MlIRhbJYGj

Also see: How to extend/modify (customize) Bootstrap 4 with SASS