Dash Bootstrap Components and Flexbox?

Layout - dbc docs shows seven examples of how to horizontally align columns within individual rows (CSS Grid). However there are no examples of how a single cell can vertically span multiple rows (Flexbox). Is there any examples of how to achieve a layout of this nature?

2 Likes

Fifth or sixth time I figured my question out myself before getting a comment. I was able to do it embedding rows and columns inside rows and columns. It was a lot of work and something I wouldn’t recommend:

dbc.Row([dbc.Col(html.Div(html.B('1'), style={'height': '190px'},
                className='bg-danger'), width=4),
    dbc.Col(html.Div([
        dbc.Row([dbc.Col(html.Div(html.B('2'), className='bg-success'))]),
        dbc.Row([dbc.Col(html.Div(html.B('3'), style={'height': '120px'},
                className='bg-info'), width=6),
            dbc.Col(html.Div([
                dbc.Row([dbc.Col(html.Div(html.B('4'), className='bg-dark badge-dark'))]),
                dbc.Row([dbc.Col(html.Div(html.B('5'), className='bg-warning'))],
                className="row mt-3")]), width=6)
        ], className="row mt-3")]), width=8)
])

the code is poorly formatted to most efficiently fit in this little block.

Now let’s see if I can create a Holy Grail Layout before the sun goes down :o?

2 Likes

Hey @marketemp,

The solution you found is correct. I just wanted to comment to point out that the Bootstrap grid system is actually built with flexbox, and so in principle you should be able to do anything with it that you can do with flexbox. Bootstrap also has a bunch of utility classes such as d-flex to give you finer control of your elements without writing your own CSS or adding a tonne of inline style arguments. You can read about those here

Thanks Tom, this is really good information as all of my searches lead with Plotly Dash Bootstrap and this wouldn’t have come up with that. You can see by my use of the color classes that I’m learning to use a bit of Bootstrap without Dash (CSS rookie), but have a long way to go.

If you or anyone on your team can shed some light on my Holy Grail layout thread, that would mean a world to me. I am about to take a second step at it using the principles from this instead of the Sidebar Example on GitHub.