Some widgets use hardcoded breakpoint names for their media queries

This issue is similar to https://github.com/twbs/bootstrap/issues/20548, however in my case I want to change the breakpoint names as follows:

$grid-breakpoints: (
  xxs: 0,
  xs: 544px,
  sm: 768px,
  md: 992px,
  lg: 1200px
);

This seems to work as far as generating the columns. However, some of the Bootstrap scss files call the media-breakpoint-* mixin with a breakpoint name that no longer matches my breakpoint names. For example, _carousel.scss calls @include media-breakpoint-up(sm) which results in 768px in my case instead of 544px. I would have to manually change it to @include media-breakpoint-up(xs) for it to be correct with my breakpoint names.

Since the number of breakpoints are the same, perhaps some type of mapping can be used to map the mixin argument to the grid-breakpoint (e.g. @include media-breakpoint-up(sm) maps to xs: 544px in $grid-breakpoints).

[Andrew-Dyachenko]

@mdo @judowalker I found the source of the problem. The fact is that in the file /node_modules/bootstrap/scss/_tables.scss the function call comes with a hard binding to the argument, which we re-recorded when the file was customized /node_modules/bootstrap/scss/_variables.scss via /node_modules/bootstrap/scss/_custom.scss. All that is required to FIX it is to do a relative binding in the argument of the function, or simply change argument “In my case from md to m”

I hope it will help to improve it

[Andrew-Dyachenko]

The same problemm: The code below working with bootstrap 4.0.0-alpha.6, but not working with bootstrap 4.0.0-beta The solution below not working with bootstrap 4.0.0-beta, but not checked in alpha