Hi Everyone,
Pls how I do I add margins to either side of the image below.
Thank you.
One simple way is to use bootstrap and let the first and last columns of the row empty:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/
Hi, Thank you.
Empty, yes but I still have to specify the width right?
No, in the layout of a bootstrap each column has 1/12 of the screen width, then if you left the first and last column empty it will have 1/12 of the screen free in either side of the screen.
But I think the default values in bootstrap let that columns free, then it will show as you want just setting nothing.
1 Like
So I did that and no margin was created.
Could you share your code?
Hey, pls see below the portion of the code
output1=html.Div([
dbc.Row([
dbc.Col([
]),
dbc.Col([
html.H6(children='Oil Production Rate',
style={
'textAlign': 'left',
'color':'#FFFFFF',
'font-size':20
}
),
html.Br(),
dcc.Graph(figure=px.line(df, x =df.index, y='oil bopd', color_discrete_sequence=['green']
).update_layout(
template='plotly_dark',
plot_bgcolor='#32383E',
paper_bgcolor='#32383E',
title='Oil Production Rate:'+ ' '+str(df['oil bopd'].iloc[-1]) + ' ' + 'bopd',
title_font_color='white',
title_font_size=36,
title_font_family='Droid Sans'))
],md=6),
dbc.Col([
html.H6(children='Gas Production Rate',
style={
'textAlign': 'left',
'color':'#FFFFFF',
'font-size':20
}
),
html.Br(),
dcc.Graph(figure=px.line(df,x=df.index,y='gas mmscfd', color_discrete_sequence=['red']
).update_layout(
template='plotly_dark',
plot_bgcolor='#32383E',
paper_bgcolor='#32383E',
title='Gas Production Rate:'+ ' '+ str(df['gas mmscfd'].iloc[-1]) + ' ' + 'mmscfd',
title_font_color='white',
title_font_size=36,
title_font_family='Droid Sans'))
],md=6),
dbc.Col([
]),
],align='center',justify="evenly"),
html.Br(),
html.Br(),
dbc.Row([
dbc.Col([
html.H6(children='Water Production Rate',
style={
'textAlign': 'left',
'color':'#FFFFFF',
'font-size':20
}
),
html.Br(),
dcc.Graph(figure=px.line(df,x=df.index,y='water bwpd', color_discrete_sequence=['blue']
).update_layout(
template='plotly_dark',
plot_bgcolor='#32383E',
paper_bgcolor='#32383E',
title='Water Production Rate:'+ ' '+str(df['water bwpd'].iloc[-1]) + ' ' + 'bwpd',
title_font_color='white',
title_font_size=36,
title_font_family='Droid Sans'))
],md=6),
dbc.Col([
html.H6(children='Cumulative Production',
style={
'textAlign': 'left',
'color':'#FFFFFF',
'font-size':20
}
),
html.Br(),
dcc.Graph(figure=px.line(df,x=df.index,y='cumulative production bbls', color_discrete_sequence=['green']
).update_layout(
template='plotly_dark',
plot_bgcolor='#32383E',
paper_bgcolor='#32383E',
title='Cumulative Production:'+ ' '+str(df['cumulative production bbls'].iloc[-1]) + ' ' + 'bbls',
title_font_color='white',
title_font_size=36,
title_font_family='Droid Sans'))
],md=6),
],align='center')
])
Thank you
Hey @Oladayo
I take the first part of your code and make a simple example, here is the code:
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[{'name': 'viewport', 'content':'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=1.0' }]
)
app.layout = dbc.Container([
dbc.Row([
# dbc.Col([
#
#
# ]),
dbc.Col([
html.H6(children='Oil Production Rate',
style={'textAlign': 'left', 'color':'#FFFFFF', 'font-size':20}),
html.Br(),
dcc.Graph( id="graph1"),
], md=6),
dbc.Col([
html.H6(children='Gas Production Rate',
style={'textAlign': 'left', 'color':'#FFFFFF', 'font-size':20}),
html.Br(),
dcc.Graph(id="graph2")
],md=6),
# dbc.Col([ ]),
],align='center',justify="evenly"),
])
if __name__ == '__main__':
app.run_server(debug=True)
Then, this is how is showed the graphics in my screen:
See if you are using bootstrap as “external_stylesheets=[dbc.themes.BOOTSTRAP]” and also the dbc.Container([ as the first layout component.
1 Like
Hi @Eduardo
So I used Darkly dbc.themes.
Also, I only introduced the dbc. Layout only at the charts section.
So let me work with the dbc. Container from the app layout section and I will revert back
Thank you so much
Hi @Eduardo, I finally fixed this by creating a css file in an asset folder with the code below;
body {
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
I got this
Thank you so much for your help.
Nice simple solution 
My recommendation to use bootstrap was because it provides proportional spaces depending on the size of the screen, for example if you want to add more wide spaces, you could use for example style={‘margin’: 100px}, but could be not to much spaces in a large screen and very large for a mobile phone screen 
2 Likes
Sounds like you have a solution, but you could also use Bootstrap utility classes such as mx-3 to add a margin in the x (horizontal) direction to the outer html.Div.
3 Likes