Bootstrap 3 breakpoints and media queries
On the Bootstrap 3 media queries documentation it says:
We use the following media queries in our Less files to create the key breakpoints in our grid system.
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) { ... }
Are we supposed to be able to use the @screen-sm, @screen-md, and @screen-lg names in our media queries as well? Because it doesn't work for me. I have to use pixel measurements such as @media (min-width: 768px) {...} before it will work. Am I doing something wrong?
Also, is the reference to 480px for extra small devices a typo? Shouldn't that say up to 767px? (since removed from the documentation)
Answer
Bootstrap 4 Media Queries
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// 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) { ... }
Bootstrap 4 provides source CSS in Sass that you can include via 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) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
Bootstrap 3 Media Queries
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
Bootstrap 2.3.2 Media Queries
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}
Resource from : https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries