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.

Packaged CDN links

dash-bootstrap-components 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 when instantiating your app.

Links are available in the dash_bootstrap_components.themes submodule.

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])

Links are available in the dbcThemes list which is added to your namespace when you import dashBootstrapComponents.

library(dash)
library(dashBootstrapComponents)

app <- Dash$new(external_stylesheets = dbcThemes$BOOTSTRAP)

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

library(dash)
library(dashBootstrapComponents)

app <- Dash$new(external_stylesheets = dbcThemes$CYBORG)

Links are available as part of the dbc_themes named tuple available in DashBootstrapComponents.

using Dash, DashBootstrapComponents

app = 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

using Dash, DashBootstrapComponents

app = 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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
app = dash.Dash(external_stylesheets=[BS])
BS <- "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
app <- Dash$new(external_stylesheets = BS)
BS = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
app = 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.

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