Dash layout bootstrap question

Dash Python
1

Hello, i try to change an existing layout.

                html.Div([ 
                    html.Div([# Title
                        html.H2('This is a title test'),                      
                    ], style={}, className='col-9 bg-success')
                    ,
                    html.Div([ # Home knop
                        dcc.Link('Home', href='/', className='btn btn-primary'),
                    ], style={}, className='col-3 text-right  bg-warning' )
                 ], style={}, className='row')

This results in:

image
image1770×51 2.24 KB

why are the colunns not 9/12 and 3/12 of the row ?

2

Normally, it’s dbc.Row and dbc.Col.

But, have you imported the dbc.theme into your external stylesheets?

1 Like
3

I think @jinnyzor is right, this looks OK:

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

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

app.layout = html.Div(
    [
        html.Div(
            [  # Title
                html.H2('This is a title test'),
            ],
            style={},
            className='col-9 bg-success'
        ),
        html.Div(
            [  # Home knop
                dcc.Link('Home', href='/', className='btn btn-primary'),
            ],
            style={},
            className='col-3 text-right  bg-warning')
    ],
    style={},
    className='row'
)


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

May I ask why you use html.Div() instead of dbc.Col() and dbc.Row()?

4

It is an existing project.

5

Make sure you are importing the bootstrap theme to the external stylesheets.

1 Like