Bootstrap 3 Media Query Breakpoints

Twitter Bootstrap 3 is a mobile-first front-end framework. But you will also find non-mobile first breakpoints in case you want to know the difference.

Min-Width (mobile first): Refers to everything greater than or equal to the amount given.
Max-Width (non-mobile): Refers to everything less than or equal to the amount given.

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){

}
@media (min-width: 768px) and (max-width: 979px) {
}
Copyright © 2024 Siam Naulak.
magnifiercrossmenu