When I use bootstrap to create a row of 2 plots side by side, it works just fine. However, when I add another row of two plots, all 4 plots start appearing on top of each other. What’s going on? I’d like a 2x2 array of plots. I’ve messed around with the keyword arguments and tried all combinations of wrapping the rows/cols in html.Div. Below is my code.
import dash
import dash_table
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,ALL
app = dash.Dash(external_stylesheets=[dbc.themes.GRID])
server = app.server
row1 = html.Div(
[
dbc.Row(
[
dbc.Col(dcc.Graph()),
dbc.Col(dcc.Graph()),
],
align=“start”,
),
]
)
row2 = html.Div(
[
dbc.Row(
[
dbc.Col(dcc.Graph()),
dbc.Col(dcc.Graph()),
],
align=“start”,
),
]
)
app.layout = html.Div(children=[
row1,
row2
])
if name == ‘main’:
app.run_server(debug=True)