How to Fix My Plotly Dash App Not Organizing Properly

Question

I'm trying to organize my Plotly Dash dashboard into sections of columns, but I can't understand what I'm doing wrong here. I've included my components in separate dbc.Cols within one dbc.Row and specified the width of the column I'd like for them to take up, but everything is just stacked. Ideally, I'd have the cards in a column all by themselves on the left, then I would have the questions next to them on the right. Can someone please help me diagnose what I'm doing that's causing all my components to stack?

#Import packages
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State



app = dash.Dash()

#App Layout
app.layout = html.Div([
    dbc.Row(children=[
                dbc.Col(id="card_col",width = 6),
                dbc.Col(id="form", width=6, children=[
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Question 1"),
                            dbc.Col(
                                dcc.Input(type="text", id="q1", placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div(children=[
                        dbc.FormGroup(children=[
                            dbc.Label("Question 2?"),
                            dbc.Col(
                                dbc.Input(type="text",id="q2",placeholder="Enter your info"),
                                width=6
                            )
                        ],row=True)
                    ]),
                    html.Br(),
                    html.Div([
                        dbc.FormGroup(children=[
                            dbc.Label("Yes/No?"),
                            dbc.Col(
                                dbc.RadioItems(id="q3",options=[{"label": "Yes", "value": 1},
                                                                {"label": "No", "value": 2}
                                                               ]
                                              ),width=6
                            )
                        ],row=True)

                    ]),
                    html.Br(),
                    html.Div([
                        html.Button(id='submit-button',
                            n_clicks=0,
                            children='Submit Query',
                            style={'fontSize':24})

                    ])

                ]) #End of second column
                ]), #End of row,
    dbc.Row(
        html.Div([
            dcc.Graph(id='graph1')
        ])
    
    )
    

])


@app.callback(
    Output('card_col','children'),
    Input('submit-button','n_clicks'),
    State('q1','value'),
    State('q2','value'),
    State('q3','value'))
def update_cards(n_clicks,input1,input2,input3):
    
    card1 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input1}", className="card-title"),
            html.P(f"{input1} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
        
    card2 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input2}", className="card-title"),
            html.P(f"{input2} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])
    
    card3 = dbc.Card([
        dbc.CardBody([
            html.H4(f"{input3}", className="card-title"),
            html.P(f"{input3} was submitted.")
        ],style={'display': 'inline-block',
           'width': '33.3%',
           'text-align': 'center',
           'background-color': 'rgba(37, 150, 190)',
           'color':'white',
           'border': "2px solid white"})
    ])    
        
    return (card1, card2, card3)
    

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

Answer 1

You haven't included the bootstrap styles:

Linking a stylesheet dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.

In Python, each CDN link is available within the dbc.themes submodule and can be used when instantiating the app object.

https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/

---

So instead of this:

app = dash.Dash()

do this:

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