I trying to add few cards side by side on a single row. I want the cards to align to the center of the page.
But instead they look like this:
Also i would like to have some padding between the cards
here is my code:
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP],meta_tags=[{'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0'}])
card = dbc.Card(
dbc.CardBody(
[
html.H4(html.B("card title"), className="card-title"),
html.Hr(),
html.H2(html.B("card text"),className='card-text',style={'color':'green'}),
]
),style={"width": "18rem","border-radius":"2%","background":"PowderBlue"}
)
app.layout = dbc.Container([
dbc.Row([
dbc.Col(html.H1(html.B("Dashboard"),
className='text-center mt-4 mb-5',
style={'color': 'Purple', 'text-decoration': 'None',}
)
)
]),
dbc.Row([
card,
card,
])
],fluid=True)
if __name__ == '__main__':
app.run_server(debug=True)
1 Like
Hey @atharvakatre
First make sure that each of your cards is wrapped in a dbc.Col
. Since you’ve set the width of the cards you might like to set width="auto"
on each dbc.Col
. Then also set justify="center"
on the dbc.Row
containing the cards.
So to be explicit, you should end up with this.
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{
"name": "viewport",
"content": "width=device-width, initial-scale=1.0",
}
],
)
card = dbc.Card(
dbc.CardBody(
[
html.H4(html.B("card title"), className="card-title"),
html.Hr(),
html.H2(
html.B("card text"),
className="card-text",
style={"color": "green"},
),
]
),
style={
"width": "18rem",
"border-radius": "2%",
"background": "PowderBlue",
},
)
app.layout = dbc.Container(
[
dbc.Row(
[
dbc.Col(
html.H1(
html.B("Dashboard"),
className="text-center mt-4 mb-5",
style={"color": "Purple", "text-decoration": "None",},
)
)
]
),
dbc.Row(
[dbc.Col(card, width="auto"), dbc.Col(card, width="auto"),],
justify="center",
),
],
fluid=True,
)
if __name__ == "__main__":
app.run_server(debug=True)
1 Like
@tcbegley sorry to bother you again. But can you brief me on how I can achieve the cards positioning as in the image below:
To be precise how to position the very right most card that says “Company Name here”
Here’s a quick mock-up that should work as a starting point
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
card = dbc.Card(
[dbc.CardHeader("Header"), dbc.CardBody("Body")], className="h-100"
)
graph_card = dbc.Card(
[dbc.CardHeader("Here's a graph"), dbc.CardBody("An amazing graph")],
className="h-100",
)
app.layout = dbc.Container(
dbc.Row(
[
dbc.Col(
[
dbc.Row([dbc.Col(card)] * 4, style={"height": "300px"}),
html.H2("Based on forecase done an approximate amount..."),
dbc.Row(
[dbc.Col(graph_card)] * 2, style={"height": "400px"}
),
],
width=8,
),
dbc.Col(card, width=2),
],
justify="center",
),
fluid=True,
className="mt-3",
)
if __name__ == "__main__":
app.run_server(debug=True)
@tcbegley this looks promising enough just like I wanted, I’ll start working on this template. Thanks again!
1 Like
As a follow-up, for the rows you could instead use dbc.CardDeck
which eliminates the need to create a Row
and wrap each card in Col
and also ensures each card is equal height for you without having to specify className="h-100"
on each card. Might be preferable as it’s a little less manual (that’s what CardDeck
is for afterall).
Here’s the modified example
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
card = dbc.Card([dbc.CardHeader("Header"), dbc.CardBody("Body")])
graph_card = dbc.Card(
[dbc.CardHeader("Here's a graph"), dbc.CardBody("An amazing graph")]
)
app.layout = dbc.Container(
dbc.Row(
[
dbc.Col(
[
dbc.CardDeck([card] * 4, style={"height": "250px"}),
html.H2("Based on forecase done an approximate amount..."),
dbc.CardDeck([graph_card] * 2, style={"height": "400px"}),
],
width=8,
),
dbc.Col(
dbc.Card(
[dbc.CardHeader("Header"), dbc.CardBody("Body")],
className="h-100",
),
width=2,
),
],
justify="center",
),
fluid=True,
className="mt-3",
)
if __name__ == "__main__":
app.run_server(debug=True)
2 Likes