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

  • read

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

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

 


Written by: Jacob Lett, a website designer & developer who creates HubSpot CMS themes and writes web design & marketing books to help marketers, designers, and web developers grow their businesses. This blog is my own personal journal and source to help others through some challenges I have faced.
Connect on LinkedIn


Category: Code Snippets
Tags:

Related resources

  • HubSpot CMS vs WordPress: Feature Comparison and Review
  • 25+ Questions to Ask Before Redesigning Your Business Website
  • 5 Things A Business Should Consider Before a Website Redesign
  • How to Get a Responsive Website for Your Manufacturing Company
  • What Is a Good WordPress Alternative for Businesses?