How to set custom breakpoints with Grid Layout from Dash Bootstrap Components?

Dash Python
1

So when using the Grid Layout from the Dash Bootstrap Components module you can specify width for different screen sizes.
There are 5 breakpoints (xs , sm , md , lg , and xl) and after looking it up on another website those breakpoints define:

  • (xs) — screen width < 576 px (This is the “default” tier)
  • sm — screen width ≥ 576 px
  • md — screen width ≥ 768 px
  • lg — screen width ≥ 992 px
  • xl — screen width ≥ 1200 px

Now I would like to have a breakpoint that is even bigger for example xxl for screens ≥ 1900px

Anyone familiar with bootstrap that could help me out here?

1 Like
2

Bootstrap is compiled from SASS, you can compile it yourself and modify the variables that control the breakpoints. Here’s the relevant part of the Bootstrap documentation.

The only caveat is that e.g. dbc.Col will not recognize xxl as a keyword argument, so you would have to apply the CSS classes manually, such as

html.Div([...], className='col col-xxl-6')

We can’t anticipate all the different breakpoints users may wish to define and add them as keyword arguments, but maybe we could add an arguments widths which would accept a dictionary like

dbc.Col([...], widths={"sm": 12, "md": {"size": 6, "order": 2}, "xxl": 3})

and the responsibility to supply valid keys would rest on the user. Would that be a useful addition do you think?

3 Likes
3

@tcbegley
Thanks for the reply.

I am not very familiar with SASS (or any of this stuff) so I will need some time to read into this.

But at least now I know that it’s doable and all the tools needed for it. Thanks

1 Like