Trying to convert bootstrap design to pydash

Dash Python
2

HI @shmilon welcome to the forums. Maybe this basic example gets you started:

from dash import Dash, dcc
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container(
    [
        dbc.Row([
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
        ]),
        dbc.Row([
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
            dbc.Col(dcc.Dropdown(options=[1, 2, 3]), width=3),
        ]),
        dbc.Row([
            dbc.Col(dcc.Input(type='number', style={'width': '100%'}), width=4),
            dbc.Col(dcc.Input(type='number', style={'width': '100%'}), width=4),
            dbc.Col(dcc.Input(type='number', style={'width': '100%'}), width=4),
        ]),
        dbc.Row([
            dbc.Col(dbc.Button('Submit', style={'width': '100%'})),
        ])
    ]
)

if __name__ == '__main__':
    app.run(debug=True, port=8050)

creates:

image
image935×192 21.5 KB

Also helpful:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/