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 );