Thank you so much for your reply! Though dbc.Stack did work well, the border was still off and I wasn’t able to figure out how to align the cards to the center and introduce a gap between them. the “gap” option wasn’t getting applied for some reason, your bootstrap worked perfectly!
card1 = dbc.Card([
dbc.CardBody([
html.H4("Number of Records", className= "text-center"),
html.P(f"{num_records}", className= 'card-body text-center')
], )],
className="card text-black border-primary border-end-0 border-top-0 border-bottom-0 border-5 shadow-lg h-100 d-flex justify-content-center align-items-center",
)
card2 = dbc.Card([
dbc.CardBody([
html.H4("Number of topics identified",className= "text-center"),
html.P(f"{num_topics}",className= 'card-body text-center')
], )
], className="card text-black border-success border-end-0 border-top-0 border-bottom-0 border-5 shadow-lg h-100 d-flex justify-content-center align-items-center",
)
app.layout = html.Div([
dbc.Container([
dbc.Row([
html.H2('Topic Analysis Dashboard', className='text-center p-3'),
]),
dbc.Row([
dbc.Col(card1, width={"size": 3}),
dbc.Col(card2, width={"size": 3,"offset" : 1})
], className= "row justify-content-center ",
),
