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