Bootstrap 5 & 4 Breakpoints – Media Queries [code snippet]

Download FREE Marketing Guides

Bootstrap 5 introduces a new breakpoint to the grid system XXL. Below are the Bootstrap media queries used for the grid system breakpoints for you to add to your projects CSS file to customize things.

What are the Bootstrap 5 Breakpoints?

Bootstrap 5 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

xxl = Extra large ≥1400px
Max container width 1320px

Bootstrap 5 media queries code snippet

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/
 
/* 
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) {  
    
}
 
/* Extra extra large devices (extra large desktops, 1400px and up) */
@media (min-width: 1400px) {  
    
}
 
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set width to make card deck cards 100% width */
@media (max-width: 950px) { 
 
}

View a bootstrap breakpoints example

What are the Bootstrap 4 Breakpoints?

Bootstrap 4 introduced a new breakpoint to the grid system XL. Below are the Bootstrap 4 media queries used for the grid system breakpoints for you to add to your project’s CSS file to customize things. If you are new to the Bootstrap 4 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 code snippet

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* 
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) { 

}

 


Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.

Tags:

Want to Get Email Updates of New Articles?

Join My Email Newsletter