Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
Available breakpoints
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 | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
Custom breakpoints
If you are looking to use custom breakpoints, you must wrap your application with
a theme provider and use the breakpoints prop to specify the breakpoints you
will use. This ensures that components such as Row or Col can parse the
correct custom breakpoint props.
<ThemeProvider
breakpoints={['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs', 'xxs']}
minBreakpoint="xxs"
>
<div>Your app...</div>
</ThemeProvider>;
More information
For more information about breakpoints, see the Bootstrap documentation.