Screen Sizes
React Bootstrap 5 Screen Sizes component
Responsive React Screen Sizes built with Bootstrap 5. Check default pixel widths for different screen sizes supported by Bootstrap 5 responsiveness features.
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | 0–576px |
| Small | sm |
≥576px |
| Medium | md |
≥768px |
| Large | lg |
≥992px |
| Extra large | xl |
≥1200px |
| Extra extra large | xxl |
≥1400px |
Each breakpoint size was chosen to be a multiple of 12 and to be representative of a subset of common device sizes and viewport dimensions. They don’t specifically target every use case or device, but the provide ranges provide a strong and consistent foundation to build on for any nearly device.
Make sure to check out the main Breakpoints documentation for more customization options & media queries.
These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px );