bootstrap 4 media queries for all devices

[Total: 1   Average: 5/5]

Bootstrap 4 introduces a new breakpoint to the grid system XL. Below is the Bootstrap 4 media queries used for the grid system breakpoints for you to add to your projects CSS file to customize things. If you are new to the Bootstrap grid I wrote a post explaining how it works in this post.

Bootstrap 4 grid tiers and media query breakpoints

xs = Extra small <576px
Max container width None (auto)

sm = Small ≥576px
Max container width 540px

md = Medium ≥768px
Max container width 720px

lg = Large ≥992px
Max container width 960px

xl = Extra large ≥1200px
Max container width 1140px

Bootstrap 4 media queries Eample

Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
Custom media queries
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) { 



Leave a Reply

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages