How to Use Bootstrap Media Query Breakpoints

Posted by David Paredes on August 30, 2016

Breakpoints are used to separate the height or width of the graphic windows in sequential-steps and provide for the case in which a visual redesign is needed to display changes in an appealing manner. Breakpoints work with the screen's min-width and max-width, which enable our website to function differently at different sizes. Min-Width: Refers to everything greater than or equal to the given screen size. Max-Width: Refers to everything equal to or less than the determined screen size. The measurements that establish our Breakpoints Media queries are:

Extra small devices (phones, less than 768px)
No media query since this is the default in Bootstrap.

Small devices (tablets, 768px and up) 
@media (min-width: @screen-sm-min) {  }
Medium devices (desktops, 992px and up) 
@media (min-width: @screen-md-min) { }

Large devices (large desktops, 1200px and up) 
@media (min-width: @screen-lg-min) { }

@media (max-width: @screen-xs-max) {  }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {  }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {  }
@media (min-width: @screen-lg-min) {  }
Extra small devices (portrait phones, less than 544px)
 No media query since this is the default in Bootstrap

 Small devices (landscape phones, 544px and up)
@media (min-width: 544px) { ... }

 Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

 Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Example of use:
@include media-breakpoint-up(sm) {
  .some-class {    display: block;  }
}

 

Are you looking to build or customize a Drupal site? Write us about your project, and we’ll get back to you within 48 hours.

If you want to learn more about why Drupal is the most widely used open-source content management system in the world, visit drupal.org/about.