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.


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.