Back to React Bootstrap

Breakpoints

www/docs/layout/breakpoints.mdx

2.10.10936 B
Original Source

import BreakpointTable from '../../src/components/BreakpointTable'; import CustomBreakpoints from '!!raw-loader!../examples/CustomBreakpoints';

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.

<BreakpointTable />

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.

<CodeBlock language="jsx">{CustomBreakpoints}</CodeBlock>

More information

For more information about breakpoints, see the <DocLink path="/layout/breakpoints">Bootstrap documentation</DocLink>.

API

ThemeProvider

<PropsTable name="ThemeProvider" />