Dbc row and columns not aligning

Dash Python
1

Hi, I am trying to create a simplar dashboard layout and just cannot get it to work. It involves having two rows of different heights in one column on the left and then one big column on the right. So I have managed to do it but I cannot get column 1, to be flush against 2 and 3, I have tried everything but I am new to this.

dashb
dashb1919×896 19 KB

Here is the code:

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

app.title = " Dashboard"

app.layout = dbc.Container(

    [

    dbc.Row([    

    dbc.Col(html.Div([

        dbc.Row([dbc.Col(html.Div(html.B('2')),style={'height': '80px',"border":"1px black solid"},width=3)]),

        dbc.Row([dbc.Col(html.Div(html.B('3')),style={'height': '900px',"border":"1px black solid"},width=3)]),

        ])),

    dbc.Col(html.Div(html.B('1'), style={'height': '100%',"border":"1px black solid"})),

            ])

    ], fluid = True)
`
2

Hi @edwoody77 and welcome to the Dash community :slight_smile:

Here’s a way to make the layout you describe:

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(
            [
                dbc.Col(
                    [
                        html.Div("2", style={"height": 80}, className="border"),
                        html.Div("3", style={"height": 900}, className="border"),
                    ],
                    width=3,
                ),
                dbc.Col(html.Div("1", className="vh-100 border")),
            ],
            className="g-0",
        )
    ],
    fluid=True,
)

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

image
image881×553 9.44 KB

One of the tricks is to set the rows without gutters like this:
className="g-0",
If you delete that line in the above code, it looks like this:

image
image877×542 9.46 KB

For more information on layouts with Bootstrap and Dash see: Layout - dbc docs

Plus here is a handy cheatsheet for using Bootstrap classes with Dash: https://dashcheatsheet.pythonanywhere.com/

3

Thanks so much looks good but the className=‘g-0’ doesnt seem to work for me, I copied the code and I still get the gutter between the boxes.

4

Actually I worked it out, I just repaced your classname wording with “no_gutters=True”. Thanks again for your help.

5

Glad it worked for you.

no_gutters=True works for dash-bootstsrap-components < v1.0.0
When you upgrade, you will have to switch to className="g-0"

1 Like