CODEWITHSUNDEEP
csstwitter-bootstrapsassresponsive-designbootstrap-4
smb
smb

Reputation: 579

Customize Bootstrap 4's grid-system Breakpoints

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.

Upvotes: 50

Views: 64919

Answers (4)

user29079417
user29079417

Reputation: 1

variables.scss

$grid-breakpoints: (
    xs: 0,        // Extra small (default mobile-first breakpoint)
    sm: 440px,    // Small
    md: 768px,    // Medium
    lg: 1280px,   // Large
    xl: 1920px    // Extra Large
) !default;;

main.scss

// 1) Import your custom variable overrides FIRST
@import "variables";

// 2) Then import Bootstrap’s main Sass
@import "../../node_modules/bootstrap/scss/bootstrap.scss";

styles.scss

@use "../src/scss/main.scss";
@use "styles/style.scss";

body {
  max-width: 100%;
}

Upvotes: 0

David DIVERRES
David DIVERRES

Reputation: 1926

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

Upvotes: 59

Carol Skelly
Carol Skelly

Reputation: 362240

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

Upvotes: 34

tao
tao

Reputation: 90008

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.

Upvotes: 12

Related Questions