4

I'm not talking about classic bootstrap css, but the React-Bootstrap module. Specifically, I'm using col elements and want to change sm,md,lg ... that sort of thing.

I swear I've googled for an answer for like 45 min and came up empty. If anyone knows, please share.

Paul Chicos
  • 41
  • 2

1 Answers1

3

I think you can fix this issue with changing sass variable in bootstrap; For bootstrap variables override:

npm install --save node-sass

/* stylesheet.scss */

@import "bootstrap/scss/functions"; 
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
//@import "bootstrap/scss/mixins/breakpoints";

/* Your customizations here */

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

@import "bootstrap";

Level 1: modifying the existing breakpoints

Let's start with something simple. Both versions of Bootstrap provide a file called variables.less (BS3) and _variables.scss (BS4) to make modifying Bootstrap a breeze. So all you have to do is to clone the Bootstrap repository from GitHub, modify the variables.* file, and to compile Bootstrap yourself. There's even a demo at Codeply showing you how to modify the "xl" breakpoint:

@import "bootstrap/functions";
@import "bootstrap/variables";

$grid-breakpoints: (
  xs: 0,
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1280px  // <-- modified!
);

$container-max-widths: (
  sm: 600px,
  md: 800px,
  lg: 1000px,
  xl: 1220px  // <-- modified!
);

@import "bootstrap";

Level 2: add a new breakpoint with Bootstrap 4

If you need to support everything from a budget Android smartphone to a 4K desktop monitor, modifying the existing breakpoints probably gets you nowhere. You need to add one or more breakpoints. That's pretty simple with Bootstrap 4:

/* example taken from https://stackoverflow.com/a/48976550/3466464 */
/* import what we need to override */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)
$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

/* override the !default vars with the values we set above */
@import "bootstrap";
Kevin B
  • 94,570
  • 16
  • 163
  • 180
Nico Peck
  • 538
  • 3
  • 16
  • 1
    This technically answers the original question, but not what I was hoping for in the bounty. Specifically I'd like to know how to make react-bootstrap recognize custom breakpoints added to the SASS i.e. xxxl, xxxxxxl, etc. – Matt Stone Feb 17 '22 at 01:01
  • 1
    After passing these steps, it is no problem to add new breakpoints too. I modify the answer. – Nico Peck Feb 17 '22 at 04:17
  • 2
    Unfortunately the module augmentation that you would need in order to get TypeScript support for additional breakpoints is a total pain in the ass because react-bootstrap doesn't have a global type for breakpoints. You'd need overrides for many individual component props. – Linda Paiste Feb 21 '22 at 01:03
  • 1
    I think it would be on only bootstrap3. But I think It was updated simply on the bootstrap4. Just you need to rebuild the bootstrap-sass on your project via node-sass – Nico Peck Feb 21 '22 at 09:25
  • 2
    This answer still doesn't integrate nicely with react-bootstrap typings, which doesn't currently seem possible (see https://github.com/react-bootstrap/react-bootstrap/issues/6247). However, awarding bounty for effort and answering the original question. – Matt Stone Feb 21 '22 at 21:47