Some widgets use hardcoded breakpoint names for their media queries

[judowalker]

This issue is similar to #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).

[cvrebert]

Since the number of breakpoints are the same

But we can't rely on that in the general case.
No good, general solution comes to mind.

CC: @mdo

[mdo]

Yeah I've struggled to think of a way to do this right... I don't know that there is one that scales well without adding too many complications to the source code. I'm open to more suggestions on how to make it work, but otherwise I think it might be outside our scope unfortunately.

[judowalker]

Could it work by passing an index instead of the hardcoded name like media-breakpoint-up(1) which refers to the second breakpoint in $grid-breakpoints?

[judowalker]

@mdo @cvrebert I think I have a decent solution. The _variables.scss can include variables for the breakpoint names, something like:

$grid-breakpoint-xs: xs !default;
$grid-breakpoint-sm: sm !default;
$grid-breakpoint-md: md !default;
$grid-breakpoint-lg: lg !default;
$grid-breakpoint-xl: xl !default;

Then you can use the variable instead of the hard-coded name: media-breakpoint-up($grid-breakpoint-sm).
This would allow the developer to overwrite the breakpoint names:

$grid-breakpoint-xs: xxs;
$grid-breakpoint-sm: xs;
$grid-breakpoint-md: sm;
$grid-breakpoint-lg: md;
$grid-breakpoint-xl: lg;

[judowalker]

@mdo @cvrebert could you take a look at my proposed solution?
#20833 (comment)

It scales well and doesn't add any complications.

[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

[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