TODAY learn how to bring Drag & Drop to Dash with Dashboard Engine. 🌠 Sign up for the live event!

Simple Dashboard 2 cols Structure with Dash Bootstrap

Hi,
Newbie here. I am looking to structure my dashboard’s with Bootstrap because it is convenient for multi-size screen etc. But I have a hard time implementing the structure I want.

Very basic dashboard : composed of 2 columns. A left and a right column of same length but different width. The left column contains filters + a picture (like a margin). The right column contains 3 superposed time series plots (like the app’s content).

The issue is that I do not find an easy way to create this structure with Bootstrap because objects on the left and the plots on the right should not be align on a same “dbc.Row”. The 3 plots on the right should have similar sizes and together have the same length than the 2 objects in the left column.

Could you code me a 2 cols dashboard template with Bootstrap ?

Moreover : do you know if there is a Gallery of Dash apps based on Bootstrap somewhere ? So not the original Dash Gallery which is not using Bootstrap. Could be very useful.

Many thanks

Here is a simplified example with 2 objects on the left and 3 objects on the right:

import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_bootstrap_components as dbc

import plotly.graph_objs as go

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[4, 1, 2])])

app.layout = html.Div(

[

    dbc.Row(

        [

            dbc.Col(

                dcc.Graph(figure=fig), 

                width=4

            ),

            dbc.Col(

                dcc.Graph(figure=fig), 

                width=8

            )

        ],

        align="center",

    ),

    dbc.Row(

        [

            dbc.Col(

                dcc.Graph(figure=fig), 

                width=4

            ),

            dbc.Col(

                [

                    dbc.Row(

                        dcc.Graph(figure=fig)

                    ),

                    dbc.Row(

                        dcc.Graph(figure=fig)

                    )

                ],

                width=8

            ),

        ],

        align="center",

    )

],

)

if name == “main”:

app.run_server()

Could you share a screenshot of what your app looks like when you run the server?

I use bootstrap on all of my apps and although I’m not the best at aesthetics, the structure always seems to work well for me. Here’s an example of what the Bootstrap layout can do:

Waw, that is really cool! Are you OK sharing the code? I am really interested. In case of it is not too much my email is vanis22@protonmail.com ^^

Here is what the dashboard should look like:

Here is where I am:

My current configuration is very unpractical.

Sorry, can’t share the code since it’s proprietary.

You need to wrap the components in your app.layout in a container instead of a Div.

For instance:

app.layout = dbc.Container([…])

Instead of:

app.layout = html.Div([…])

For some reason, the bootstrap layout components won’t instantiate properly unless they’re in a container.

Good luck!