Need help with aligning dbc.Row/Col items

Dash Python
1

So, I have 3 Rows and 3 Cols, created using dash_bootstrap_components
Problem is, the first row contains not 3 elements, but 2. I want elements in first column to be same width, and the second element of the first row to be a length of 2 items + gap (to fill empty space left)
Currently done:

image
image1916×567 59.8 KB

Code:

def layout():
    return html.Div(
        [
            html.H1("Overview"),
            dbc.Row(
                [dbc.Col(total_registered_subs()), dbc.Col(registered_subs_by_engagement)],
                justify="left",
                style={"margin-bottom": "20px"},
            ),
            dbc.Row([dbc.Col(total_registered_subs())] * 3, justify="left", style={"margin-bottom": "20px"}),
            dbc.Row([dbc.Col(total_registered_subs())] * 3, justify="left", style={"margin-bottom": "20px"}),
        ],
        style={"margin-left": "20px", "margin-right": "20px"},
    )

What I want to do is shown on next picture:

image
image1101×630 125 KB

Any ideas would be helpful, as I’m only novice here :')

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/

1 Like