Bootstrap4: Accessing Variables?

Question

I switched from Bootstrap 3 to Bootstrap 4. I use sass sources, which I compile on the go. When I changed libraries, I started getting errors on my media switches, i.e. for

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

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

What is the correct way to access Bootstrap4 variables?

Thank.

Answer 1

See the relevant section of the Bootstrap 4 migration documentation.

Variables @screen-*have been replaced with a variable $grid-breakpointsalong with auxiliary mixes media-breakpoint-up(), media-breakpoint-down()and media-breakpoint-only().

Usage example:

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

Answer 2

BS4 Less Sass. , . . bootstrap/_variables.scss :

@import 'bootstrap/variables';
@media screen and (min-width: $screen-md-min) {
    padding: 40px 50px;
}