Using Bootstrap or external CSS with Dash WebApp

brs
Level 1
Using Bootstrap or external CSS with Dash WebApp

Hello !

I'm currently trying to build a Dash WebApp in dataiku, but I don't really like how CSS is handled in this tutorial : Hands-On: Dash Webapp โ€” Dataiku Academy 9.0 documentation

Is there any way to load an external CSS file (uploaded on dataiku) that we will be able to use in the layout through the attribute 'className', or in the same way, use bootstrap using a CDN link ? 

I've tried to do what's describe here : Adding CSS & JS and Overriding the Page-Load Template | Dash for Python Documentation | Plotly, but whenever I touch directly to 'app', the backend won't work anymore.

dash.exceptions.NoLayoutException: The layout was `None` at the time that `run_server` was called
.
Make sure to set the `layout` attribute of your application before running the server.

 Thanks for your help ! 

1 Reply
fchataigner2
Dataiker

Hi,

you can change the CSS after the app startup by accessing it directly in the config property, like explained in this post on Dash, with 

app.config.external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']