✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash Bootstrap Components behaving very strangely with DCC plots (reproducible)

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)

By default Col tries to size itself intelligently to accommodate its content. dcc.Graph also tries to expand to fill available space. As a result the cols expand to full width.

If you want a 2x2 grid, you should specify the width on each Col:

dbc.Col(dcc.Graph(), width=6)  # width specified as number 1,...,12, so 6 is half width

On really small screen that might be a bit tight, so you can stack the graphs on small screens and have them half width for medium screen sizes and up by doing something like

dbc.Col(dcc.Graph(), width=12, md=6)