Dbc row and columns not aligning

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.

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(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)

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

if __name__ == "__main__":

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

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/

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.

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

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"