How to use Bootstrap 4 media query mixins

This snippet shows you how to use Bootstrap 4 SCSS Media Query Mixins.

Dependencies

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

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";

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: 576px) and (max-width: 768px) {}

Min and max width

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

The mixins take Bootstrap breakpoint values as parameters. By default these are:

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.