Using Dash Bootstrap Components in your Apps

Issue:

You've set up a basic Dash App (perhaps using our guide to Get Started with Dash), but you're ready to take it a step further by adding Dash Bootstrap Components.

Resolution:

Dash Bootstrap Components can be implemented into your App with only a couple of steps!

1) Adding to your Environment

Add the following to the Dockerfile instructions for your Environment to add the Dash Bootstrap Components package:

pip install dash-bootstrap-components

Using the example in our Documentation, your environment's complete Dockerfile would be:

USER root

# Install the libraries we want to use in our app
RUN pip install dash==2.3.0 && \
    pip install dash-bootstrap-components && \
    pip install dash-renderer==0.13.0  && \
    pip install plotly --upgrade

USER ubuntu

2) Importing the Package

Next you'll import the package into your App script, adding the following line:

import dash_bootstrap_components as dbc

3) Calling your App

To use a stylesheet, you can add it to the call instantiating your App. Without Dash Bootstrap Components, instantiating your app will probably look like:

app = dash.Dash(__name__, routes_pathname_prefix='/', requests_pathname_prefix=runurl)

Adding in the call to a stylesheet with Dash Bootstrap Components, your app will be instantiated the same way, but with an additional reference to a Bootstrap theme or stylesheet:

app = dash.Dash(__name__, routes_pathname_prefix='/', requests_pathname_prefix=runurl, external_stylesheets=[dbc.themes.BOOTSTRAP])

Or, to assign your stylesheet to a variable prior to instantiating your App:

my_stylesheet = ['stylesheet.css']

app = dash.Dash(__name__, routes_pathname_prefix='/', requests_pathname_prefix=runurl, external_stylesheets=my_stylesheet)

(Replacing 'stylesheet.css' with your own stylesheet file (include single quotations) or an available Bootstrap stylesheet (e.g. [dbc.themes.BOOTSTRAP] - no quotation marks).

A very basic sample App using Dash Bootstrap Components in Domino might look like the following:

import os
import dash
import dash_bootstrap_components as dbc

# Configure Dash to recognize the URL of the container
user = os.environ.get("DOMINO_PROJECT_OWNER")
project = os.environ.get("DOMINO_PROJECT_NAME")
runid = os.environ.get("DOMINO_RUN_ID")
runurl = '/' + user + '/' + project + '/r/notebookSession/'+ runid + '/'

app = dash.Dash(__name__, routes_pathname_prefix='/', requests_pathname_prefix=runurl, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    dbc.Alert("Hello Bootstrap!", color="success"),
    className="p-5",
)

if __name__ == '__main__':
    app.run_server(port=8888, host='0.0.0.0', debug=True)