Documentation

Themes

Customise your app by choosing from different Bootstrap and Bootswatch themes.

dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice, so you can achieve the look you want in your app.

You can link to a stylesheet served over a CDN, or serve CSS locally depending on your needs.

The themes module

The dash_bootstrap_components.themes module contains links to Bootstrap and Bootswatch stylesheets hosted on BootstrapCDN so you can conveniently link to one of them in your app. The easiest way to do so is to use the external_stylesheets argument in the dash.Dash constructor like this.

import dash
import dash_bootstrap_components as dbc

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

This will link the standard Bootstrap stylesheet. To link one of the Bootswatch styles, such as Cyborg you would just change this to

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])

See the available themes for more.

Manually linking to a CDN

Each theme such as dash_bootstrap_components.themes.BOOTSTRAP is simply BootstrapCDN URL stored as a Python string, so using the themes module is really equivalent to doing something like the following.

BS = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
app = dash.Dash(external_stylesheets=[BS])

You can change this URL to anything you like, for example if you prefer to use a mirror or a different CDN to supply the stylesheet.

Linking local CSS

You can download a stylesheet and serve it locally if you prefer. This might be desirable if you are restricted by a firewall or if you want to modify the stylesheet or even compile your own. The easiest way to link a local stylesheet is to place it in a folder named assets/ in the root of the app directory. See the Dash documentation for more details on this.

Available themes

There are numerous free to use Bootstrap stylesheets available on the web. The dash_bootstrap_components.themes module contains CDN links for Bootstrap and all of the Bootswatch themes. Bootstrap also maintains its own themes website which lists a number of free and premium themes that you could incorporate into your apps.

To start with, we recommend experimenting with some of the Bootswatch themes available in the dash_bootstrap_components.themes module. The full list of available themes is CERULEAN, COSMO, CYBORG, DARKLY, FLATLY, JOURNAL, LITERA, LUMEN, LUX, MATERIA, MINTY, PULSE, SANDSTONE, SIMPLEX, SKETCHY, SLATE, SOLAR, SPACELAB, SUPERHERO, UNITED, YETI