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

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:

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)

5 posts - 2 participants

Read full topic