Framework-Specific Breakpoints in CSS
From the Screen Sizes & Responsive Breakpoints cheat sheet · Standard Breakpoints & Device Sizes · verified Jul 2026
Framework-Specific Breakpoints
Default breakpoints used by popular CSS frameworks and design systems
css
/* Bootstrap 5 */
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
/* Tailwind CSS */
sm: '640px' // Small devices
md: '768px' // Medium devices
lg: '1024px' // Large devices
xl: '1280px' // Extra large
2xl: '1536px' // 2X Extra large💡 Tailwind uses mobile-first with sm/md/lg/xl/2xl prefixes
📱 Bootstrap 5: xs(<576px), sm(≥576px), md(≥768px), lg(≥992px)
🎯 Material-UI: xs(0px), sm(600px), md(900px), lg(1200px), xl(1536px)
⚡ Customize framework breakpoints to match your design needs
📌 Keep breakpoint consistency across your entire project
✅ Document custom breakpoints for team consistency