Problem Styling dbc Card border

[ak3000]

I’m trying to style the cards such that they are the same height, and have a border only on the left side, but it is showing correctly only when I minimize it. When I maximize the page, the border shows halfway inside the card

cards = dbc.CardGroup(
    [ dbc.Card([
    dbc.CardBody([
        html.H4("Number of Records", className= "text-center"),
        html.P(f"{num_records}", className= 'card-body text-center')
    ], ),
    
], className="border-start border-primary border-5 justify-content-center align-items-center shadow-lg",
 ),
 dbc.Card([
    dbc.CardBody([
        html.H4("Number of topics identified",className= "text-center"),
        html.P(f"{num_topics}",className= 'card-body text-center')
    ], className= "border-start border-success border-5")
    
], className="justify-content-center align-items-center shadow-lg",
 )

    ]
)

I also tried using the border style in the db.card style but that just gives me a full border

Can someone pl help me out where I’m going wrong

[AIMPED]

Hi @ak3000, I think you’re applying the border to the CardBody instead of the card in the second card.

[ak3000]

but I want the border to be only on the left side, not all the sides, and it only appears like that when I put it in the card body. that’s the problem I am facing.

[AIMPED]

You might use the subtractive method:

Borders

I actually think you discovered some kind of incompability between border styling and dbc.CardGroup() because there should be a border visible using the following code as is. Instead, you have to comment out the dbc.CardGroup() and comment in the dbc.Stack()

from dash import Dash, html
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container(
    # dbc.Stack(
    #     direction='horizontal',
    dbc.CardGroup(
        children=[
            dbc.Card(
                [
                    dbc.CardBody(
                        [
                            html.H4(
                                "Number of Records",
                                className="text-center"
                            ),
                            html.P(
                                f"{27886}",
                                className='text-center'
                            )
                        ]
                    )
                ],
                className="border-primary border-end-0 border-top-0 border-bottom-0 border-5",
            ),
            dbc.Card(
                [
                    dbc.CardBody(
                        [
                            html.H4(
                                "Number of topics identified",
                                className="text-center"
                            ),
                            html.P(
                                f"{37655}",
                                className='text-center'
                            )
                        ]
                    )
                ],
                className="ms-5 border-secondary border-end-0 border-top-0 border-bottom-0 border-5",
            )
        ]
    ),
    fluid=True
)

if __name__ == '__main__':
    app.run(debug=True)

I added the ms-5 for better visibility.

[ak3000]

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 ",
        ),