Dbc.card that has no borders and is transparent

Dash Python
1

Hi Everyone,

I have the following (which shows a card but the card has borders and I don’t think it’s transparent).

Where should I add ‘card border-0’ or just ‘border-0’ the remove borders and how do I set a dbc.card as transparent.

Thanks

Code -----------------

card_content = [
    #dbc.CardHeader("Card header"),
    dbc.CardBody(
        [
            html.H5("Card title"),
            html.P(
                "This is some card content that we'll reuse",
            ),
        ],
    ),
]


app.layout = html.Div(
    [
        
        dbc.Row(
            [
                dbc.Col(dbc.Card(card_content, outline=False),width=9),
                dbc.Col(dbc.Card(card_content),width=3),
            ]
        ),
    ],className="card border-0",
)
2

Hi @Chas

Try changing your layout to:


app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(dbc.Card(card_content, className="border-0 bg-transparent"), width=9),
                dbc.Col(dbc.Card(card_content), width=3),
            ]
        ),
    ], 
)

Another option it to just use an html.Div() rather than use a dbc.Card(dbc.CardBody() and removing all the card formatting.

1 Like