Make breakpoint CSS variables available when not using _grid.scss

[levin192]

Prerequisites

• [x] I have searched for duplicate or closed feature requests
• [x] I have read the contributing guidelines

Proposal

Bootstrap’s breakpoint CSS variables (e.g., --bs-breakpoint-md) should be available globally, even when not using the grid system.

These variables were originally in _root.scss but were moved to _grid.scss in PR #37844, making them unavailable unless the grid is used.

Motivation and context

On smaller projects, I sometimes don’t use the Bootstrap grid system but still rely on responsive utility classes like d-lg-none.

For this reason, the variables should remain in _root.scss, as they are not exclusive to the grid system.

Also, the name $grid-breakpoints is misleading since the breakpoints are used more broadly. A more appropriate name would be $breakpoints, though that’s outside the scope of this request.

[levin192]

A proposed fix would be of course to move this back into _root.scss:

@each $name, $value in $grid-breakpoints {
  --#{$prefix}breakpoint-#{$name}: #{$value};
}

A fix for now is just placing this anywhere below the @import of _variables.scss

:root {
  @each $name, $value in $grid-breakpoints {
    --#{$prefix}breakpoint-#{$name}: #{$value};
  }
}

[mdo]

Agreed on omitting the grid prefix, that'll come in v6 I think. We had the vars awhile ago, but because they can't be used in media queries, we dropped them. Then, folks still wanted access to those, so we put them in the grid CSS. We can rearrange some of that later though.