EXWE Blog
News about Tipps & Tricks from the EXWE Blog
Subscribe to articles about digitalization, software development and e-commerce
  Show all news (72)

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

Banner 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

@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.20 um 11:53

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.

We also have the following interesting posts from our tech blog for you on this topic
Online store hosting - the ten most frequently asked questions

Everything you need to know about online store hosting - provider, costs, own server? We have the answer!

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.

Why you should not use the word "advertising" in your image names

It should be prevented urgently picture names bspw. as my_advertising.jpg or other abbreviations in this direction to provide.




Schreibe EXWE auf WhatsApp