It is common knowledge among the web development community that Bootstrap 3 is an extremely popular web Framework. It is ideal for the rapid development of responsive, mobile-first web-based projects. That is the reason why we are letting you have our Bootstrap 3 media queries cheat sheet.
Twitter Bootstrap as it’s popularly known, is an HTML, JavaScript, and CSS framework. It is designed to make UI/UX designers cater to the development expectations of web applications and websites. It does this by gracefully adapting to the various plethora of mobile devices and different screen sizes present on Desktops and other unconventional devices today.
There comes a time when the designer needs to do some fine-tuning in their work. He needs to add or modify existing classes to meet their particular needs. Knowing when to break the design to cater to the next screen size is important. Therefore we have put together this Bootstrap 3 media queries cheat sheet to get you on your way. This CSS cheat sheet has been broken down into three main sections:
- Mobile First Responsive Design: These are the default Bootstrap 3 CSS breakpoints
- Non-Mobile First Responsive Design: This is an alternate to the above paradigm.
- Combination of the Above methods: This allows one to combine the two methods above in a more elegant design code structure.
You can take a look at the cheat sheet below then go over to this repository and download the complete source to use as you see fit. The usage is not restricted to Bootstrap 3 web projects. The code below is universal and will work in any web application or website you ate working on.
The Bootstrap 3 Media Queries Cheat Sheet
/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Portrait Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Landscape Phones and Phablets, Portrait Tablets, Small Desktops */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Landscape Tablets, Laptops, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Large Desktops, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method. Opposite of the above ==========*/
/* Large Devices, Large Desktops, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Landscape Tablets, Laptops, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Landscape Phones and Phablets, Portrait Tablets, Small Desktops */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Portrait Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/*========== Combined Mobile and Non-Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media (max-width : 479px) {
}
/* Extra Small Devices, Portrait Phones */
@media (min-width:480px) and (max-width:767px){
}
/* Small Devices, Landscape Phones and Phablets, Portrait Tablets, Small Desktops */
@media (min-width:768px) and (max-width:991px){
}
/* Medium Devices, Landscape Tablets, Laptops, Desktops */
@media (min-width:992px) and (max-width:1199px){
}
/* Large Devices, Large Desktops, Wide Screens */
@media (min-width:1200px){
}Happy Coding!
Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.