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

by Meike Müller
Tipps & Tricks

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


Bootstrap 3


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.

Was ist dein Projekt? Wenn du uns darüber erzählen möchtest, rufen wir dich zurück!

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.

Du möchtest immer am Zenit der Technik bleiben? Keine News und Blogbeiträge mehr verpassen.
We also have the following interesting posts from our tech blog for you on this topic
Why your business needs a landing page

Everything you need to know for your landing page and how you can use it to target customers and direct them to your website

Integrate phpstan into Bitbucket pipeline

Here's how to integrate the popular static PHP code analyzer into your Bitbucket pipeline - our tips and tricks to make your life easier.

What does Google PageSpeed really say?

Why Google PageSpeed is often misinterpreted, what really helps you optimize your load time and guarantee the optimal user experience.