Media queries using SASS in Bootstrap 4

media-queries-b4.scss

// -- Default media queries

// Extra small devices (Mobile phones, 0px and up)
// No media query needed since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@include media-breakpoint-up(sm) { ... }

// Medium devices (tablets, 768px and up)
@include media-breakpoint-up(md) { ... }

// Large devices (desktops, 992px and up)
@include media-breakpoint-up(lg) { ... }

// Extra large devices (large desktops, 1200px and up)
@include media-breakpoint-up(xl) { ... }

// -- We occasionally use media queries that go in the other direction (the given screen size or smaller):

// 575px and down
@include media-breakpoint-down(xs) { ... }

// 767px and down
@include media-breakpoint-down(sm) { ... }

// 991px and down
@include media-breakpoint-down(md) { ... }

// 1199px and down
@include media-breakpoint-down(lg) { ... }

// -- There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

// Extra small devices (portrait phones, less than 576px)
@include media-breakpoint-only(xs) { ... }

// Small devices (landscape phones, 576px and up)
@include media-breakpoint-only(sm) { ... }

// Medium devices (tablets, 768px and up)
@include media-breakpoint-only(md) { ... }

// Large devices (desktops, 992px and up)
@include media-breakpoint-only(lg) { ... }

// Extra large devices (large desktops, 1200px and up)
@include media-breakpoint-only(xl) { ... }

// -- Similarly, media queries may span multiple breakpoint widths:
// Apply styles starting from medium devices and up to extra large devices

@include media-breakpoint-between(md, xl) { ... }

// Further reading
// Bootstrap media queries are built using sass maps. They are arrays with keys and values - https://webdesign.tutsplus.com/tutorials/an-introduction-to-sass-maps-usage-and-examples--cms-22184
// http://saddamazad.com/2015/12/bootstrap-4-media-queries-using-sass/
// All of the documenation here is avaliable and maintained on the getbootstrap documentation website.
// https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints