Bootstrap 4 Media Queries Tiered Breakpoints [snippet]

  • read

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

hubspot crm

Advertise Here

Bootstrap 4 media queries code snippet


Written by: Jacob Lett - Jacob is a HubSpot CMS designer & developer who helps B2B businesses grow their revenue. Unlike his competitors, he focuses on small and consistent website design changes to increase results. He recently created the Industrial HubSpot Theme to help manufacturers quickly build their website on the HubSpot CMS platform. Connect on LinkedIn
Category: Code Snippets

Signup Free

Advertise Here