Will v5 include breakpoint CSS variables?

[thelevicole]

In v4 we have access to the breakpoints values via CSS variables:

:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

As documented here: https://getbootstrap.com/docs/4.6/getting-started/theming/#css-variables

But after using v5 and reading the docs, these do not appear to exist in the current v5 beta2. See here: https://getbootstrap.com/docs/5.0/customize/css-variables/

The documentation does mention breakpoints and more coming soon...

Bootstrap includes around two dozen CSS custom properties (variables) in its compiled CSS, with dozens more on the way for improved customization on a per-component basis. These provide easy access to commonly used values like our theme colors, breakpoints, and primary font stacks when working in your browser’s inspector, a code sandbox, or general prototyping.

So my question is, will they be added in a future release?

I ask because I like to uses these variables in javascript. For example:

const getCssVar = name => getComputedStyle( document.body ).getPropertyValue( name ) || null;

const breakpoints = {
    xs: parseInt( getCssVar( '--breakpoint-xs' ) ),
    sm: parseInt( getCssVar( '--breakpoint-sm' ) ),
    md: parseInt( getCssVar( '--breakpoint-md' ) ),
    lg: parseInt( getCssVar( '--breakpoint-lg' ) ),
    xl: parseInt( getCssVar( '--breakpoint-xl' ) )
};

if ( window.innerWidth > breakpoints.md ) {
  // Do something
} else {
  // Do something else
}

Even better, it would be cool if these were added to the bootstrap javascript API. I started implementing something similar for v4 https://thelevicole.com/breakpoints.js/ but needs a lot of work.

[thelevicole]

Just to add that for the time being, because I compile bootstrap source sass I've added the below to my project...

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

[mdo]

We pulled it because they cannot be used in media queries and it feels a little disingenuous in that regard. But, the JS angle is interesting for sure.

[thelevicole]

Ahh ok, thats reasonable. It would be great if they remained but it's not huge problem as it can be easily solved with the solution above.

It might be worth removing references to breakpoints in the variables documentation and mentioning it in the migration docs 🤷🏻