Bootstrap media queries cheat sheet for Bootstrap 3 & Bootstrap 4 & Bootstrap 5

04.12.2020
by Meike Müller
Tipps & Tricks
Banner

Bootstrap media queries cheat sheet for Bootstrap 3 & Bootstrap 4 & Bootstrap 5. tips and tricks about Bootstrap from the web ticklers at EXWE GmbH.

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` 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) { ... }

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

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Bootstrap 5 (latest version)

@media (min-width: 576px){}
@media (min-width: 768px){}
@media (min-width: 992px){}
@media (min-width: 1200px){}
@media (min-width: 1400px){}

Bootstrap 4

@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Bootstrap 3

 @media(max-width:767px){}
 @media(min-width:768px){}
 @media(min-width:992px){}
 @media(min-width:1200px){} 

What is bootstrap?

Bootstrap is, open source project hosted on GitHub, freely available to all. The front-end CSS framework is extremely customizable. It includes design templates for typography, buttons, tables, forms, navigation design elements and grid systems based on HTML and CSS. Additionally, there are JavaScript extensions. With Bootstrap, you can customize and develop small and large projects relatively quickly - and do it in a way that works well on all devices and displays a consistent look and feel across all web browsers. If you need further advice or help with web development - the team at EXWE will be happy to help you with any questions you may have.

Did you know that Bootstrap was born from the intention to further develop Twitter's internal analysis and management tools? So it's no surprise that the first use of Bootstrap (under real-world conditions) was at Twitter's first Hackweek. In 2011, Twitter published its findings on the developer portal GitHub after realizing the great benefits of Bootstrap for web design and made the framework available as open source world-wide. If you own a private homepage whose structure hardly changes, Bootstrap is probably not for you, as you can't fully benefit from its advantages.

If you have a corporate website or an online store, its appearance can only benefit from using Bootstrap. Advantages here are the easy configuration of designs and graphics, faster development of new frontends, detailed documentation and instructions, a consistent display on all browsers and an optimized view on all mobile devices. Disadvantages of Bootstrap are the hidden technical basics of web design and the lack of professional support and optimization - Bootstrap is and remains open source.

Meike
Meike
from 04.12.2020

Hello, my name is Meike. I take care of the EXWE back office and am responsible for our social media channels. All of our articles are meant to make your life easier and help you make decisions. Nevertheless, it can happen that something remains unclear, so: If you have questions about this article you can easily reach me at +49 231 93149827.

Show all news (87)

We also have the following interesting posts from our tech blog for you on this topic
Do away with emails! Tools for more effective customer support

Project management tools that make your life easier and why email and ticket systems as communication channels lead to problems.

Here's how to connect your retail with online commerce!

E-commerce solutions for your store - how to professionalize your merchandise management with the help of Pickware and JTL

Facebook Sweepstakes: Attention for your business

Use our tips and tricks to generate "Likes" in sweepstakes on your Facebook business page and optimize your business!




info@exwe.de
+49 231 93149827