How to center a dbc card inside of a dbc.Row()

Dash Python
#1

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:

community
community1915×1000 48.7 KB

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
#2

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)

image
image1160×389 9.72 KB

1 Like
#3

Thanks a lot @tcbegley :slightly_smiling_face:

1 Like
#4

@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”

Sample 2.1
Sample 2.11139×563 195 KB

#5

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)

image
image1744×853 24.1 KB

#6

@tcbegley this looks promising enough just like I wanted, I’ll start working on this template. Thanks again!

1 Like
#7

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