Breakpoints Mixins in Bootstrap

Bootstrap is developed to be mobile first. Start your designs/QA/builds from mobile first and scale up. It's important to note that breakpoints have been updated as well:

xs - Extra small devices (portrait phones, less than 576px)
sm - Small devices (landscape phones, 576px - 767px)
md - Medium devices (tablets, 768px - 991px)
lg - Large devices (desktops, 992px - 1199px)
xl -Extra large devices (large desktops, 1200px and up)

Use these mixins to compile media-query breakpoints:

Mobile First:

Extra small devices
No media query necessary for xs breakpoint as it's effectively:
@media (min-width: 0) { ... }

Small devices
@include media-breakpoint-up(sm) { ... }
Compiles to:
@media (min-width: 576px) { ... }

Medium devices
@include media-breakpoint-up(md) { ... }
Compiles to:
@media (min-width: 768px) { ... }

Large devices
@include media-breakpoint-up(lg) { ... }
Compiles to:
@media (min-width: 992px) { ... }

Extra large devices
@include media-breakpoint-up(xl) { ... }
Compiles to:
@media (min-width: 1200px) { ... }

When you need to go down the other direction:

Extra small devices
@include media-breakpoint-down(xs) { ... }
Compiles to:
@media (max-width: 575.98px) { ... }

Small devices
@include media-breakpoint-down(sm) { ... }
Compiles to:
@media (max-width: 767.98px) { ... }

Medium devices
@include media-breakpoint-down(md) { ... }
Compiles to:
@media (max-width: 991.98px) { ... }

Large devices
@include media-breakpoint-down(lg) { ... }
Compiles to:
@media (max-width: 1199.98px) { ... }

Extra large devices
No media query necessary for xl breakpoint has no upper bound on its width.

For targeting only a single segment of screen sizes using the minimum and maximum breakpoint widths:

Extra small devices
@include media-breakpoint-only(xs) { ... }
Compiles to:
@media (max-width: 575.98px) { ... }

Small devices
@include media-breakpoint-only(sm) { ... }
Compiles to:
@media (min-width: 576px) and (max-width: 767.98px) { ... }

Medium devices
@include media-breakpoint-only(md) { ... }
Compiles to:
@media (min-width: 768px) and (max-width: 991.98px) { ... }

Large devices
@include media-breakpoint-only(lg) { ... }
Compiles to:
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

Extra large devices
@include media-breakpoint-only(xl) { ... }
Compiles to:
@media (min-width: 1200px) { ... }

If you need to span between multiple breakpoint widths:

@include media-breakpoint-between(md, xl) { ... }
Compiles to:
@media (min-width: 768px) and (max-width: 1199.98px) { ... }