Is there a way to have custom breakpoints in React-Bootstrap

user_16190157 0
Viewed 351

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.

react-bootstrap reactjs
1 Answers

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";
user_149795860
Related