Dash Bootstrap Templates
See these features live at : Dash
dash-bootstrap-templates library provides:
-
Bootstrap themed Plotly figure templates. You will find a Plotly template for each of the 26 Bootstrap/Bootswatch themes available in the
Dash Bootstrap Components Library. These templates will automatically style your figures with Bootstrap theme colors and fonts. -
Two All-in-One components to change themes in a Dash app.
ThemeSwitchAIOtoggles between two themes.ThemeChangerAIOselect from multiple themes.
-
The dbc.css stylesheet which styles Dash Core Components and the Dash DataTable with a Bootstrap theme.
Note: The
ThemeSwitchAIOandThemeChangerAIOcomponents and thedbc.cssstylesheet requires Dash Bootstrap Components>=V1.0.0. It will only
work with the themes included in Dash Bootstrap Components>=V1.0.0.
Figure Template Quickstart
pip install dash-bootstrap-templates
Learn more about Plotly figure templates and themes at: Theming and templates in Python
"""
A sample of 8 of the 26 Bootstrap themed Plotly figure templates available
in the dash-bootstrap-template library
"""
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
import plotly.express as px
df = px.data.gapminder()
templates = [
"bootstrap",
"minty",
"pulse",
"flatly",
"quartz",
"cyborg",
"darkly",
"vapor",
]
load_figure_template(templates)
figures = [
px.scatter(
df.query("year==2007"),
x="gdpPercap",
y="lifeExp",
size="pop",
color="continent",
log_x=True,
size_max=60,
template=template,
title="Gapminder 2007: '%s' theme" % template,
)
for template in templates
]
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([dcc.Graph(figure=fig, className="m-4") for fig in figures])
if __name__ == "__main__":
app.run_server(debug=True)
dbc.css stylesheet
The dash-core-components, the Dash DataTable and Plotly figures are not automatically styled with a Bootstrap theme.
An easy way to make your Dash components look better with a Bootstrap theme is to use the stylesheet from
the dash-bootstrap-templates library. This stylesheet defines the “dbc” class.
Adding className="dbc" minimally styles Dash components with your selected Bootstrap theme:
- Makes the text readable in both light and dark themes.
- Uses theme’s font-family.
- Changes the accent color to the theme’s primary color
You can add the dbc class as an external stylesheet like this:
dbc_css = ("https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.2/dbc.min.css")
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])
Add className="dbc" to the outer container of the app or a component like this:
app.layout = dbc.Container(
[
...
],
fluid=True,
className="dbc"
)
That’s it! Simply adding className="dbc" will make Dash Core Components and the DataTable look better with ALL themes included in the dash-bootstrap-components library.
See a live demo at: Dash
If you have suggestion for improvements or if you find a bug, please let us know on the issue tracker
Requires dash-bootstrap-components>=V1.0.0
Theme Switcher Components
See a live demo at Dash
dash-bootstrap-templates has two All-in-One components to change themes.
- The
ThemeSwitchAIOis a switch with icons on the left and right, which is ideal for toggling between a light and a dark theme. - The
ThemeChangerAIOhas a button that opens andbc.Offcanvascomponent which by default shows all the available themes.
Note the All-in-One component switches the Bootstrap stylesheet for the app and sets the default Plotly figure template for the theme, however, figures must be updated in a callback in order to render the figure with the new template.
See the callback below for an example. The template_from_url is a helper function that returns the template name based on the theme url. For example template_from_ur(dbc.themes.SLATE) returns "slate"
ThemeChangerAIO Quickstart
from dash import Dash, dcc, html, Input, Output
import pandas as pd
import plotly.express as px
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import ThemeChangerAIO, template_from_url
dbc_css = (
"https://cdn.jsdelivr.net/gh/AnnMarieW/dash-bootstrap-templates@V1.0.1/dbc.min.css"
)
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc_css])
df = pd.DataFrame(
{
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 2, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"],
}
)
header = html.H4(
"ThemeChangerAIO Demo", className="bg-primary text-white p-4 mb-2 text-center"
)
buttons = html.Div(
[
dbc.Button("Primary", color="primary"),
dbc.Button("Secondary", color="secondary"),
dbc.Button("Success", color="success"),
dbc.Button("Warning", color="warning"),
dbc.Button("Danger", color="danger"),
dbc.Button("Info", color="info"),
dbc.Button("Light", color="light"),
dbc.Button("Dark", color="dark"),
dbc.Button("Link", color="link"),
],
className="m-4",
)
graph = html.Div(dcc.Graph(id="graph"), className="m-4")
app.layout = dbc.Container(
[
header,
dbc.Row(
[
dbc.Col(ThemeChangerAIO(aio_id="theme", radio_props={"value":dbc.themes.FLATLY}), width=2,),
dbc.Col([buttons, graph],width=10),
]
),
],
className="m-4 dbc",
fluid=True,
)
@app.callback(
Output("graph", "figure"), Input(ThemeChangerAIO.ids.radio("theme"), "value"),
)
def update_graph_theme(theme):
return px.bar(
df, x="Fruit", y="Amount", color="City", barmode="group", template=template_from_url(theme)
)
if __name__ == "__main__":
app.run_server(debug=True)
Here is the same app, but using a the ThemeSwitchAIO component to toggle between two themes.
See the (code here).
It’s also possible to change the icons. See an example of using Bootstrap icons instead of the default FontAwesome
icons here.
Background
Dash Labs is Plotly library that explores new features for future releases of Dash.
In Dash Labs V0.4.0, there was a cool feature where Bootstrap themed figure templates were created “on the fly”. This was a
part of the layout templates project that is no longer being developed.
Even though these Bootstrap themed figure templates will not be included in Dash, the dash-bootstrap-templates makes
them available to you. The figure templates are created using the Dash Labs’ algorithms and saved in json format. When
you use load_figure_template() in your app, it loads the json file, adds it to plotly.io and sets it as the default figure template for an app. See more
information about Plotly figure templates here.
Available Themes
This library provides a figure template for the following Bootstrap/Bootswatch themes:
valid_themes = [
“bootstrap”,
“cerulean”,
“cosmo”,
“flatly”,
“journal”,
“litera”,
“lumen”,
“lux”,
“materia”,
“minty”,
“pulse”,
“sandstone”,
“simplex”,
“sketchy”,
“spacelab”,
“united”,
“yeti”,
“cyborg”,
“darkly”,
“slate”,
“solar”,
“superhero”,
“morph”,
“quartz”,
“vapor”
“zephyr”
]
