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

Answer 2

According to their documentation, in order to customize Bootstrap you need to:

1. copy/paste from /scss/_variables.scss to _custom.scss whatever you want to modify
2. remove any !default from the pasted code and change the values to what you want
3. recompile (see Build tools) - you need to successfully run npm run dist to rebuild from source.

You're not supposed to modify anything inside _variables.scss as you will lose those changes upon upgrading Bootstrap. With the steps above, you can safely upgrade Bootstrap and keep your mods.

Note: Even if you don't care about upgrading, and you want to modify directly in /scss/_variables.scss, you still need to recompile to apply the changes to your /dist/ files.

---

Addendum: to address basZero's concern about this not being a "recommended solution", I'd argue Bootstrap has been built from the ground up to be modular and configurable. They provide ample documentation:

• build tools
• theming
• as well as a map to its contents

If recompilation wasn't recommended, I'd argue they wouldn't have gone through the trouble of documenting it in such detail.

Another useful tool is bootstrap.build which is basically an online recompilation tool (and it's not the only one).

Through compilation you can change the number of columns, or the margin/padding utility spacer values, responsiveness breakpoints and, most importantly, you can specify which modules to include: one could limit bootstrap to its grid system only or the buttons module or could choose to only include its modals.

Answer 3

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