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.
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.
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