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.

I need to change that xl breakpoint globally for bootstrap. Do I have to recompile Bootstrap 4 from the source files?

I tried setting this in with 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, nothing changed with the breakpoint for xl globally, it still would do the break instead at 1200px wide.

Answer 1

Bootstrap 4.x & 5.x

You need to override the $grid-breakpoints and $container-max-widths variables BEFORE importing the Bootstrap sources. Here 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...