How to align logo with webapp header in dash?

Dash Python
2

HI @Moo
welcome to Dash. I find that dash bootstrap components give a lot of layout flexibility. This code below worked for me. Make sure to put your image in the assets folder.

from dash import Dash, html
import dash_bootstrap_components as dbc

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

app.layout =  dbc.Container(children=[
    dbc.Row([
        dbc.Col(html.H1(children=['Tweet Performance Dashboard']), width=8),
        dbc.Col(html.Img(src="assets/plotly-logo.png"), width=4)
    ], justify='start')
])

if __name__=='__main__':
    app.run_server(port=8002)

Here is the layout documentation if you would like to make changes.

2 Likes