Bootstrap media queries: Tips for Bootstrap 3, 4 & 5
Bootstrap media queries cheat sheet for Bootstrap 3 & Bootstrap 4 & Bootstrap 5. Tips and tricks about Bootstrap from the web developers at EXWE GmbH.
Reading time 4 min
// 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){}
FAQ about Bootstrap
To conclude this article, we will address a few questions that have arisen. If you have any questions about web development or in general, we at EXWE will be happy to answer your questions by phone.
-
What is Bootstrap?
Bootstrap is a popular front-end web framework that helps developers create responsive and mobile-first websites and applications. It offers a variety of CSS and JavaScript components that are pre-built and can be quickly and easily integrated into web projects. Bootstrap was originally developed by Twitter and is now one of the most widely used frameworks for developing websites and applications.
-
What do you do with Bootstrap?
With Bootstrap, web developers can quickly and easily create responsive and mobile-first websites and applications. It offers a variety of ready-made CSS and JavaScript components that can be easily integrated into a web project. These components include menus, forms, buttons, tables and much more. By using Bootstrap, developers can save time and effort by using existing, tested and stable code bases instead of creating everything from scratch.
-
What extensions are available for Bootstrap?
There are numerous extensions and plug-ins for Bootstrap that make it possible to further customize the framework to the individual needs of a project. Some examples of such extensions are
- Bootstrap Datepicker: This plug-in makes it possible to easily and intuitively implement date pickers in forms.
- Bootstrap Colorpicker: This plug-in offers a user-friendly way to integrate color selections in web projects.
- Bootstrap Select: This plug-in improves Bootstrap's standard drop-down menus and offers additional features such as live search and opt groups.
- Bootstrap File Input: This plug-in extends Bootstrap's standard file upload function and offers additional features such as drag-and-drop support and file selection with preview images.
These are just a few examples of the many possible extensions and plug-ins for Bootstrap. It is worth searching the internet for further options and considering which extensions are best suited to your own project.
-
Is Bootstrap free of charge?
Yes, Bootstrap is free and open source. It was originally developed by Twitter and is now published under the MIT license, which means that it can be freely used, modified and redistributed. Developers can therefore access the framework and all associated resources free of charge and use it in their projects.
-
Why should I use Bootstrap?
There are several reasons why you should use Bootstrap:
- Time saving: Bootstrap offers a variety of pre-built CSS and JavaScript components that can be quickly and easily integrated into a web project. Developers therefore do not have to create everything from scratch, but can fall back on a stable and tested code base.
- Responsive design: Bootstrap has been developed from the ground up for responsive and mobile-first web design. It offers a range of CSS classes and utilities that make it easy to design websites and applications to look and work well on different devices and screen sizes.
- Popularity and support: Bootstrap is one of the most widely used front-end web frameworks and has a large and active developer community. This means that there are plenty of resources and tutorials to fall back on if you have questions or need support. It's also easy to find other developers who are familiar with Bootstrap if you need external help.
- Flexibility: Although Bootstrap offers many pre-built components, it can also be easily customized to meet individual needs. For example, developers can ignore certain components of the framework or add their own CSS and JavaScript code snippets to customize the framework to the specific requirements of the project.
-
What functions does Bootstrap have?
Bootstrap is a front-end web framework that helps developers create responsive and mobile-first websites and applications. It offers a variety of pre-built CSS and JavaScript components that can be easily integrated into a web project. The features of Bootstrap include:
- A grid-based layout system that makes it easy to create responsive and mobile-first designs.
- A variety of CSS classes and utilities that make it possible to quickly and easily define typographic styles, colors, margins and other design elements.
- A range of pre-built CSS and JavaScript components, such as menus, forms, buttons, tables and much more.
- Integration with other JavaScript libraries and plug-ins, such as jQuery and Popper.js.
- Support for the latest web standards, such as Flexbox and CSS Grid.
- A well-documented and active developer community that provides resources and tutorials and helps with questions and problems.
Was ist dein Projekt? Wenn du uns darüber erzählen möchtest, rufen wir dich zurück!
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.
Project management tools that make your life easier and why e-mail and ticket systems as a communication channel lead to problems.
How to integrate the popular static PHP code analyzer into your Bitbucket pipeline - our tips and tricks to make your life easier.
Use our tips and tricks to generate "likes" for competitions on your Facebook company page and optimize your business!
