Center a card in a row with Dash Bootstrap Components

center_cards_in_row_bootstrap.py

from dash import Dash, html
import dash_bootstrap_components as dbc


app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP],
)

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={
        "width": "18rem",
        "border-radius": "2%",
    },
)

app.layout = dbc.Container(
    [
        dbc.Row(dbc.Col("Dashboard", className="text-center mt-4 mb-5 h1 fw-bold")),
        dbc.Row(
            [
                dbc.Col(card, width="auto"),
                dbc.Col(card, width="auto"),
            ],
            justify="center",
        ),
    ],
    fluid=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)