Bootstrap: $container-max-widths shouldn't warn about equal widths

[konstin]

We are setting a custom value for $container-max-widths using sass and webpack, so that lg and xl are both 800px.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 800px,
  xl: 800px
);


@import "~bootstrap/scss/bootstrap";

This leads to the following warning when building with webpack

WARNING: Invalid value for $container-max-widths: This map must be in ascending order, but key 'xl' has value 800px which isn't greater than 800px, the value of the previous key 'lg' !
Backtrace:
    node_modules/bootstrap/scss/_functions.scss:16, in mixin `-assert-ascending`
    node_modules/bootstrap/scss/_variables.scss:180

Instead of requiring values to be greater than the previous values bootstrap should allow them to be equal.

(Plattform: Bootstrap: bootstrap ^4.0.0-beta.2, Ubuntu 17.04, node 6.11.5, webpack 3.8.1)

[gijsbotje]

if you dont want xl, you can just delete it (if im remember correctly)

[konstin]

That's true indeed. Is this in the docs? I couldn't find it there.

[mdo]

Yup, see https://getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid for modifying those values.

[konstin]

Great, thanks! I've totally missed that.

[Dalisra]

But if I delete xl from the list it will be set to default that is 1100px.

How can I make it same as lg = 800px?

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 800px
);

[Dalisra]

Ahh I got it, you cant have max width of xl same as lg.. I need to remove the xl all together, by removing it from $grid-breakpoints, like this:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);