Responsive Breakpoints
Breakpoints are viewport widths where the layout changes. Common values follow content flow, not device sizes.
Standard Bootstrap breakpoints: 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl).
HTML
Intermediate
5 min read
Choosing Responsive Breakpoints
Example
/* Content-based breakpoints */
@media (min-width: 576px) { /* Small devices */ }
@media (min-width: 768px) { /* Tablets */ }
@media (min-width: 992px) { /* Laptops */ }
@media (min-width: 1200px) { /* Desktops */ }
/* Pro tip: set breakpoints where content breaks, not for specific devices */ Pro Tip
Resize your browser slowly and add a breakpoint where the layout looks broken — that is the natural breakpoint.