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 widthLarge 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
| Label | Layout width | Column width | Gutter width |
|---|---|---|---|
| Large display | 1200px and up | 70px | 30px |
| Default | 980px and up | 60px | 20px |
| Portrait tablets | 768px and above | 42px | 20px |
| Phones to tablets | 767px and below | Fluid columns, no fixed widths | |
| Phones | 480px and below | Fluid columns, no fixed widths | |
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) { ... }
As with most developers who install WAMP you are probably working with localhost as your development domain name and directories for your projects.
If you are using “wp_insert_post” to insert large amounts of posts from external scripts or even code within WordPress and notice “wp_insert_post memory consumption” is very high, “increasing PHP memory” may not be the solution you are looking for.
If you suddenly start to get the error “Fatal error: Call to undefined function get_option() in” “/wp-admin/admin.php” or “Fatal error: Call to undefined function wp() in” “/wp-blog-header.php on line %%” when trying to access the admin of your WordPress website chances are your WordPress installation has got corrupt.
If you have been trying to ZIP multiple directories into individual files, this simple command will do just that for you.