Update not all Bootstrap grid breakpoints

Question

I have 2 questions: 1. What the $container-max-width Bootstrap variable is used for? 2. How should I override the variables if I need the following resolutions?

 sm: 0px -> 768px - tablet portrait
 md: 769px -> 1442px - tablet landscape and laptop
 lg: 1443px -> 1920px - large screens

Could you explain why you need to override the break-points? — mahan, May 18 '18 at 07:35

score 0 · Answer 1 · 2018-05-18T06:25:58.223

0

Just import your variables before bootstrap import, because those variables are define with !default flag, so when your scss will be transforming to css it will use your override values.

$grid-breakpoints: (
  xs: 0,
  sm: 0,
  md: 769px,
  lg: 1443px,
  xl: 1921px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

@import 'bootstrap'

edited May 18 '18 at 06:25

answered May 18 '18 at 06:05

And how should I modify the values in $container-max-width? – xyzz May 18 '18 at 06:20
Under 769px the application is not responsive. Do you know why? – xyzz May 18 '18 at 06:51
Also, if xs=0 and sm=0 then the build fails with this message: Invalid null operation: "null sub 0.02px" – xyzz May 18 '18 at 07:00

score 0 · Accepted Answer · answered May 18 '18 at 10:30

You just need to override $grid-breakpoints and $container-max-widths. Write these codes before where you import bootstrap.

Grid break-points

// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

$grid-breakpoints: (
        sm: 0,
        md: 769px,
        lg: 1443px,
) !default;

Grid containers

// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
        sm: 768px,
        md: 1442px,
        lg: 1920px,
) !default;

Update not all Bootstrap grid breakpoints

2 Answers2

Grid break-points

Grid containers