Black Lives Matter. Please consider donating to Black Girls Code today.

Change layout on screen resize

Hi,

I am trying to modify my application to be able to open it on smaller screens (ipad). I have modified css to achieve this, but I would also like to change layout when width is smaller than x. I have two dbc.Columns on my page. And based on width I would like to change its position to have one under another. It can be achived be changing width of both cols to 12. Is there any way to do this? I was thinking about implementation of js code, but I haven’t found any solution to trigger callback with it.

Thanks

Hey @lance, you could try something like this

dbc.Row([dbc.Col(..., width=12, md=6), dbc.Col(..., width=12, md=6)])

Which means the column should be 12 columns wide by default, and 6 columns wide on a medium sized screen and up.

You can specify width for all of the Bootstrap breakpoints (xs, sm, md, lg, xl) like this, and you can even set the order and offset of them. Check out the documentation for more details. You can read more about Bootstrap’s responsive breakpoints here.

1 Like

Great! This is exactly what I need. Thank you very much. I didn’t expect such solution, thats why I didn’t notice these arguments.

1 Like