Need help with aligning dbc.Row/Col items

Dash Python
2

Hey @ilazariev , you can use the width of the columns to arrange your cards. The maximum colum width is 12, so in your case you have in the first row one column of widht=4, and an other column of width=8.

Here some code:

import dash_bootstrap_components as dbc
from dash import Dash, html

card = dbc.Card(
    [
        dbc.CardHeader("This is the header"),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P("This is some card text", className="card-text"),
            ]
        ),
        dbc.CardFooter("This is the footer"),
    ],
    className='p-1'
)

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(card, width=4),
                dbc.Col(card, width=8),
            ],
            className="g-0"
        ),
        dbc.Row(
            [
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
            ],
            className="g-0"
        ),
        dbc.Row(
            [
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
                dbc.Col(card, width=4),
            ],
            className="g-0"
        )
    ],
    fluid=True
)

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

grafik
grafik948×560 23.7 KB

More information:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/

2 Likes