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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | @media (min-width: 576px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } @media (min-width: 1400px) { } @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
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | @media (min-width: 576px) { } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } @media (max-width: 950px) { } |
