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

    import ThemeProvider from 'react-bootstrap/ThemeProvider'
    NameTypeDefaultDescription
    breakpoints
    arrayOf
    		['xxl', 'xl', 'lg', 'md', 'sm', 'xs']

    An array of breakpoints that your application supports. Defaults to the standard Bootstrap breakpoints.

    children required
    React.ReactNode
    dir
    string

    Indicates the directionality of the application's text.

    Use rtl to set text as "right to left".

    minBreakpoint
    string
    		'xs'

    The minimum breakpoint used by your application. Defaults to the smallest of the standard Bootstrap breakpoints.

    prefixes
    object
    		{}

    An object mapping of Bootstrap component classes that map to a custom class.

    Note: Changing prefixes is an escape hatch and generally shouldn't be used.

    For more information, see here.