Vertical lines between columns - Plotly-Dash

Question

Given the following dashboard example :

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

app.layout = html.Div(
        [
            dbc.Row(
                [
                    dbc.Col(html.P("Item 1")),
                    dbc.Col(html.P("Item 2")),
                    dbc.Col(html.P("Item 3")),
                ]
            ),
            dbc.Row(
                [
                    dbc.Col(html.P("Item 4")),
                    dbc.Col(html.P("Item 5")),
                    dbc.Col(html.P("Item 6")),

                ]
            ),

            dbc.Row(dbc.Col(html.P("Some more content..."))),
        ]
)

if __name__ == "__main__":
    app.run_server(debug=True)

How can I add customizable vertical lines between the columns in the following manner ?

Note that the lines span over multiple rows (here, 2). Thanks !

Answer 1

You can add custom css by adding an assets folder to your app and adding a style.css file with the following content (for adding a solid blue line - customization as required)

.column_left {
  border-right: 5px solid #3333ff;
}

The second thing is to then separate out columns in your layout like so:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[{"name": "viewport", "content": "width=device-width"}])

leftside_col = dbc.Col([
    html.P("Item 1"),
    html.P("Item 4")
], className='column_left')

center_col = dbc.Col([
    html.P("Item 2"),
    html.P("Item 5")
], className='column_left')

rightside_col = dbc.Col([
    html.P("Item 3"),
    html.P("Item 6")
])
app.layout = html.Div([
            dbc.Container([
                dbc.Row([
                    leftside_col,
                    
                    center_col,
                    
                    rightside_col    
                ]),
                html.Hr(),
                dbc.Row(dbc.Col(html.P("Some more content...")))
            ]),
])

if __name__ == "__main__":
    app.run_server(debug=False)

The app looks like: