Skip to main content

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.

BreakpointClass infixDimensions
X-SmallNone<576px
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥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.

API

ThemeProvider