I am trying to create a dashboard using dash and the bootstrap grid. Here is what I am trying to achieve:
According to the documentation (https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/) I can create columns within a rows, but is there a way to create rows within columns? I need my graph to span across two "rows" of previous columns. I was thinking this could be achieved with:
dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content])])
However the columns are just stacking on top of each other. Here is my code for the first two columns:
app.layout = dbc.Col([
dbc.Col([ html.H1("temp1",style={'textAlign': 'center' ,'height':'5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_1', children=['Sales'], className='card-title'),
html.P(id='card_text_1', children=['Sample text.'])
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height':'30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_2', children=['Eng'], className='card-title'),
html.P(id='card_text_2', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_3', children=['Diff'], className='card-title'),
html.P(id='card_text_3', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
], style={'height': '90vh','width':'50vh'}),
dbc.Col([ html.H1("temp2",style={'textAlign': 'center' ,'height': '5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_4', children=['Card Title 4'], className='card-title'),
html.P(id='card_text_4', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_5', children=['Card Title 5'], className='card-title'),
html.P(id='card_text_5', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
dbc.Card(
[
dbc.CardBody(
[
html.H4(id='card_title_6', children=['Card Title 6'], className='card-title'),
html.P(id='card_text_6', children=['Sample text.']),
], style={'textAlign': 'center','font-family': 'Consolas'}
)
], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
),
], style={'height': '90vh','width':'50vh'}),
], style={'height': '100vh', 'width':'100vh'})
