Default Media Query Sizes for Twitter Bootstrap

As someone who uses Twitter Bootstrap for front-end responsive development, I constantly have to look up bootstrap media query breakpoints. Some instances as an example are, when I need to use JavaScript for dynamic content manipulation such as events fired on window widths, or even adding some extra CSS classes to format content.

This keeps taking me to the bootstrap scaffolding guide to look for these values. So I thought I will document them in one place for easy reference.

You can find the different Bootstrap Breakpoints by version below.

Bootstrap 4 Media Query Breakpoints

Default mobile first breakpoints

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

// Anything below 576px - xs

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

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

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

// Extra large devices (large desktops, 1200px and up) - xl
@media (min-width: 1200px) { ... }

Mobile first SASS mixins

@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) { ... }

Large display breakpoints

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Large display SASS mixins

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }

Bootstrap 3 Media Query Breakpoints

Default Mobile First Breakpoints

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

LESS variables

/* 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) { ... }

Bootstrap 2.3.2 Media Query Breakpoints

Default Mobile First Breakpoints

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }