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 v5 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.
Packaged CDN links
dash-bootstrap-components contains links to Bootstrap and Bootswatch stylesheets hosted on JSDelivr 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 when instantiating your app.
Links are available in the
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 is simply a BootstrapCDN URL stored as a string, so using the themes module is really equivalent to doing something like the following.
BS = "https://firstname.lastname@example.org/dist/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. There are tools online to help with this, we recommend Bootstrap Build.
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][bootstrap-themes] 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
Check out the theme explorer for a live demo of dash-bootstrap-components using all of the different available themes. You may also like to check out the dash-bootstrap-css project which contains Bootstrap stylesheets that apply consistent styling to various components from dash-core-components.