48

I have an application where the design needs 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.

Top-Master
  • 7,611
  • 5
  • 39
  • 71
smb
  • 539
  • 2
  • 13
  • 33
  • Note: Most of the answers here use breakpoints that are supposedly incompatible with Bootstrap. There are some [mathematical requirements](https://stackoverflow.com/a/54027304/114558). – rinogo Aug 14 '21 at 13:21

3 Answers3

56

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...
David DIVERRES
  • 1,811
  • 21
  • 30
  • I read the bootstrap documentation, but there is no xxl size. This is only given by a third party. Are you using this? https://www.npmjs.com/package/bootstrap-xxl – Tito Leiva Jul 16 '19 at 07:54
  • 4
    @TitoLeiva No, I have simply defined a custom new width for my use case. You can define whatever you want. – David DIVERRES Jul 16 '19 at 09:44
34

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
12

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:

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.

tao
  • 82,996
  • 16
  • 114
  • 150
  • 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. – basZero Sep 21 '20 at 12:14
  • 1
    @basZero, I've added to my answer to address your concern. – tao Sep 21 '20 at 22:55
  • i'm sorry, I must have misunderstood your solution. Now it's clear and correct! – basZero Sep 22 '20 at 08:07