Customize Bootstrap 4's grid system breakpoints

Question

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

I need to change xl breakpoints globally for boot. Do I have to recompile Bootstrap 4 from source?

I tried setting this in my Sass build:

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

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1220px
);

However, there is no change in the global xl breakpoint, it will still break at 1200px wide.

Answer 1

Change the $grid-breakpoints variable and it will work fine. Remember you have to import /bootstrap or bootstrap/variables in custom.scss and then after @import bootstrap.

For example:

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

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

See also: How to extend/use SASS to modify (customize) Bootstrap 4

Answer 2

Bootstrap 4.x and 5.x

Before importing the Bootstrap source, you need to override the $grid-breakpoints and $container-max-widths variables. Here is a working example (scss):

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);
    
$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);
    
// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...