Edd Yerburgh Software Engineer

How to use Bootstrap 4 media query mixins

If you’re using Bootstrap 4 SCSS you’ll want to use the Bootstrap 4 Media Query Mixins.

Include

To use the Bootstrap 4 mixins you must include _variables.scss, _functions.scss, and mixins/_breakpoints.scss.

The mixin

The mixins are pretty self explanatory :

Min width

@include media-breakpoint-up(sm) {
  // Styles
}
/* Compiled:
 * @media (min-width: 544px) {}
 */

Max width

@include media-breakpoint-down(sm) {
  // Styles
}
/* Compiled:
 * @media (min-width: 544px) and (max-width: 768px) {}
 */

Min and max width

@include media-breakpoint-between(sm, md) {
    // your code
}
/*
 * @media (min-width: 576px) and (max-width: 991px) {}
 */

They use the Bootstrap breakpoint values as parameters. By default these are :

xs 0
sm 544px
md 768px
lg 992px
xl 1200px

You can change these values by editing the $grid-breakpoints map in variables.scss. This will also change the values for the grid and responsive utilities.

And that’s how to correctly use Bootstrap 4 media query mixins.

Any questions, leave a comment.