Divide my dashboard into two columns in Python Dash

Question

I tried now for some time to divide my dashboard into two columns, with "Material1" centered in the first column, and "Material2" centered in the second column, keeping the graph as is (entire width) of this dashboard:

I tried dbc.col and dbc.Row methods to solve this, but haven't found the right way to do this.

Any help is highly appreciated!! :)

This is my code:

app.layout = html.Div([
          
    # Input Row: Material 1
    
    html.Div([
    
    html.Label('Material 1'),
    dcc.Dropdown(
        id='dropdown1',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value=options1[0],
        style={'width': '400px', 'margin-left': 0}),
    
    ]),
    
    html.Div([
    
    html.Label('m3'),
    daq.NumericInput(
        id='numeric-input-1',
        min=0,
        max=200,
        value=0,
        style={'width': '200px', 'margin-left': 0}),
    
    ]),
    
    # Input Row: Material 2
    
    html.Div([
    
    html.Label('Material 2'),
    dcc.Dropdown(
        id='dropdown2',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value=options1[0],
        style={'width': '400px', 'margin-left': 0}),
    
    ]),
    
    html.Div([
    
    html.Label('m3'),
    daq.NumericInput(
        id='numeric-input-2',
        min=0,
        max=200,
        value=0,
        style={'width': '200px', 'margin-left': 0}),
    
    ], style={'display': 'inline-block'}),
    
    # Input: Indicator
    
    html.Div([
    
    html.Label('Indicator'),    
    dcc.Dropdown(
        id='dropdown3', 
        style={'width': '400px', 'margin-left': 0}),
        
    ]),
    
    #Graph
    
    html.Div([
        
    dcc.Graph(
        id='display-selected-values',
        style={'width': '2400px', 'margin-left': 0, 'columnCount': 1}),
    ])
    
])

Answer 1

• it's all about being systematic (where code formatters help)
• using dash 2.0.0 and dbc 1.0.0-b1
• keep on embedding Row and Col as required to meet your layout requirements

import json
import numpy as np
import dash_bootstrap_components as dbc
import dash
from jupyter_dash import JupyterDash

all_options = {k: v for k, v in zip(list("ABCD"), np.random.randint(1, 4, 4))}
options1 = list(all_options.keys())
# Build App
app = JupyterDash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dash.html.Div(
    [
        dbc.Row(
            [
                dbc.Col(
                    dbc.Row(
                        [
                            dash.html.Label("Material 1"),
                            dash.dcc.Dropdown(
                                id="dropdown1",
                                options=[
                                    {"label": k, "value": k} for k in all_options.keys()
                                ],
                                value=options1[0],
                                style={"width": "400px", "margin-left": 0},
                            ),
                        ],
                        justify="center",
                    ),
                ),
                dbc.Col(
                    dbc.Row(
                        [
                            dash.html.Label("Material 2"),
                            dash.dcc.Dropdown(
                                id="dropdown2",
                                options=[
                                    {"label": k, "value": k} for k in all_options.keys()
                                ],
                                value=options1[0],
                                style={"width": "400px", "margin-left": 0},
                            ),
                        ],
                        justify="center",
                    ),
                ),
            ],
            justify="center",
        ),
        dash.dcc.Graph(id="newCases", style={"height": "45vh"}),
    ],
    style={"font-family": "Arial", "font-size": "0.9em", "text-align": "center"},
)


# Run app and display result inline in the notebook
app.run_server(mode="inline")