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

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...