Trying to convert bootstrap design to pydash

Dash Python
1

I am trying to convert this html Screenshot by Lightshot submit form design to pydash bootstrap but I failed to design can anyone help me?

Thank you in advance.

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/

3

Thank you so much brother for your help. Now, I just need to beautify the design with bootstrap css and @callback function.

4

Yes, I did the easy part :slightly_smiling_face: