Bootstrap components

Dash Python
1 
>     import dash
    >     import dash_bootstrap_components as dbc
    >     import dash_html_components as html
    > 
    >     external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
    > 
    >     app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
    >     app.layout = html.Div(
    >     [
    >     dbc.Row(dbc.Col(html.Div("A single, half-width column"), width=6)),
    >     dbc.Row(
    >         dbc.Col(html.Div("An automatically sized column"), width="auto")
    >     ),
    >     dbc.Row(
    >         [
    >             dbc.Col(html.Div("One of three columns"), width=3),
    >             dbc.Col(html.Div("One of three columns"),width=6),
    >             dbc.Col(html.Div("One of three columns"), width=3),
    >         ]
    >     ),
    >     ]
    >     )
    >

> Blockquote

>     if __name__=='__main__':
    >     	app.run_server()

I copied the code from the dash bootstrap documentation , yet my results are different. Can someone look into it?

Untitled
Untitled.png1146×618 12 KB

expecting something similar to this
Untitled
Untitled.png1920×1080 27.4 KB

2

You are using the wrong CSS. See https://dash-bootstrap-components.opensource.faculty.ai/ and the “Getting started section”.

1 Like
3

Thanks for the response . Will look into it and revert back.

4

All you need to do is change to:

external_stylesheets = [dbc.themes.BOOTSTRAP]
5

Thank you. It worked. But, now the plot on the left hand side is smaller in size and it appears a little above from the level of the other plot.