Stacking dbc.Card(s) without using dbc.Col(s)

📊 Plotly Python
1

Is there a way to set column width as a percentage instead of an int? Or just stacking dbc.Card(s)? I am trying to get to this layout

image
image1327×569 6.03 KB

2

I recently answered a similar question. You just need to define a few css classes and then include the css class in dbc.Col(children, class_name='small-card').

1 Like
4

Thank you, it was my question and that worked like magic with cards, but I need them stacked. So my understanding is that I have put two cards in the left column and one in the right one. I tried changing the Column width with a css class but it didn’t take. Works on a card but not on a column

5

I’m not 100% sure why dbc.Col doesn’t like getting a CSS property. A simple solution is to just replace those with html.Div components. If I ever come across why this is happening, I’ll make sure to update the solution appropriately.

# package imports
from dash import Dash, html
import dash_bootstrap_components as dbc

app = Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)
app.layout = dbc.Container([
    dbc.Row(
        [
            html.Div(
                [
                    dbc.Card('Card1'),
                    dbc.Card('Card2'),
                ],
                className='small-col'
            ),
            html.Div(
                [
                    dbc.Card('Card3')
                ],
                className='large-col'
            )
        ]
    )
])

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

And in assets/styles.css use the following:

.small-col {
    width: 20%;
}

.large-col {
    width: 80%;
}
1 Like
7

Perfect, thank you! That’s what I ended up doing, I wanted a fully dbc. solution, but I guess that is not feasible.