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.

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

Solution 2

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

Solution 3

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.

Comments

[TommyAutoMagically]

Note: Most of the answers here use breakpoints that are supposedly incompatible with Bootstrap. There are some mathematical requirements.

[Tito Leiva]

I read the bootstrap documentation, but there is no xxl size. This is only given by a third party. Are you using this? npmjs.com/package/bootstrap-xxl

[David DIVERRES]

@TitoLeiva No, I have simply defined a custom new width for my use case. You can define whatever you want.

[basZero]

that's not a recommended solution, you shouldn't modify bootstrap definition files. Rather override them in your own SCSS before importing the bootstrap SCSS.

[tao]

@basZero, I've added to my answer to address your concern.

[basZero]

i'm sorry, I must have misunderstood your solution. Now it's clear and correct!

[TommyAutoMagically]

I'm pretty sure we also have to update $container-max-widths, right?