Bootstrap 5 Breakpoints and Grid
Bootstrap 5's breakpoint tiers, container behavior, and responsive grid classes - plus a fast way to test Bootstrap layouts on every device.
7 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
The six breakpoint tiers
Bootstrap 5 defines tiers that map to its grid and utility classes. The smallest tier has no infix and is the mobile default, while sm, md, lg, xl, and xxl add styles as the screen grows. Understanding the tier boundaries is the key to predicting how col- and d- utilities behave at each width.
xs (<576px) is the unlabeled mobile default
sm 576px, md 768px, lg 992px, xl 1200px
xxl 1400px for very wide layouts
Tiers are min-width based, matching mobile-first CSS
Grid and container behavior
Bootstrap's 12-column grid lets you set column spans per tier, like col-12 col-md-6, so a layout stacks on mobile and splits on tablet. Containers switch between fixed max-widths at each tier or stay fluid with container-fluid. Mixing the two thoughtfully is how you control gutters and reading width.
col-12 col-md-6 stacks on mobile, two-up from md
.container snaps to fixed widths per tier
.container-fluid spans the full viewport
Use offset and order utilities for responsive rearrangement
Test Bootstrap layouts across tiers
Each tier boundary is a place a Bootstrap layout can shift unexpectedly, especially with nested rows. Viewing all tiers at once makes the grid behavior obvious. In Sizzy you keep a device per tier open with synced scrolling, so you can confirm columns stack, reorder, and align correctly without reloading.
Open a viewport just inside each tier boundary
Confirm columns stack and split at the right widths
Check gutters and container max-widths per tier
Verify nested grids don't collapse at the edges
Release checklist
Know which tier each layout change belongs to.
Test a width just inside every tier boundary.
Confirm container max-widths match the design.
Check nested rows and column ordering on mobile.
Frequently asked questions
What are Bootstrap 5's breakpoints?
Bootstrap 5 uses xs (<576px), sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px). All breakpoint-specific classes are min-width based, so md applies from 768px upward.
How does the Bootstrap grid become responsive?
You assign column spans per tier, such as col-12 col-md-6, so the layout stacks on small screens and splits into columns from the specified tier upward. The grid is always 12 columns wide.
What's the difference between container and container-fluid?
.container snaps to a fixed max-width at each breakpoint tier, while .container-fluid always spans the full viewport width. Choose based on whether you want a constrained reading width or edge-to-edge content.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.