The breakpoints are based on the Bootstrap 5 grid, see docs here
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 24. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don't specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.