Bootstrap4: Accessing variables?

Question

I switched from Bootstrap 3 to Bootstrap 4. I am using sass sources which I compile on the run. When I changed the libraries, I started to get error on my media switches, i.e. for

@media screen and (min-width: $screen-md-min) {
    padding: 40px 50px;
}

I get error Undefined variable: "$screen-md-min".

What is a correct way to access variables of Bootstrap4?

Thank u.

Answer 1

See the relevant section of the Bootstrap 4 migration documentation.

The @screen-* variables have been replaced by the $grid-breakpoints variable along with the media-breakpoint-up(), media-breakpoint-down(), and media-breakpoint-only() helper Sass mixins.

Example usage:

@include media-breakpoint-up(md) {
    padding: 40px 50px;
}