Bootstrap 4 Media Queries Tiered Breakpoints [snippet]

  • Updated on
  • read
  • Add to Flipboard Magazine.

Bootstrap 4 introduces 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 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 code snippet

 


Written by: Jacob Lett - Web designer and BootstrapCreative instructor
Category: Code Snippets
Tags:

Leave a comment

Related Posts

Blog Home

Categories

Topics