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 - Jacob started BootstrapCreative to help others learn web design and development. He has built websites for 10+ years for companies and as a freelancer. He enjoys learning and encouraging others to improve their skills.
Category: Code Snippets

Want to Get Email Updates?

Receive a monthly digest of new tutorials and resources.

Advertise Here