Loading bootstrap on dash 0.22

Dash Python
1

Hi Im using Dash version 0.22 and wondering if its possible to load external sources like boostrap css to the app.
I tried what is provided in the documentation but it does not work.

My code is below:

import dash
import dash_html_components as html
external_stylesheets = [
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO',
        'crossorigin': 'anonymous'
    }
]

app = dash.Dash(__name__,external_stylesheets=external_stylesheets)
app.scripts.config.serve_locally = False


app.layout = html.Div(html.Div([
    html.Div(
        'This is an inner Div',
        className = "col-sm",
        style={'color':'blue', 'border':'2px blue solid', 'borderRadius':5,
        'padding':10, 'width':220}
    ),
    html.Div(
        'This is another inner Div',
        className='col-sm',
        style={'color':'green', 'border':'2px green solid',
        'margin':10, 'width':220}
    ),
], className= "row"
), className='container')

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

It does not crate the column grid it should using bootstrap 4.

2

Hey, if you wanna use Bootstrap within your app, there is a Bootstrap Module for Dash :

https://dash-bootstrap-components.opensource.faculty.ai/

It goes as simple as : pip install dash-bootstrap-components

2 Likes