This repo contains Bootstrap v4 compatible stylesheets for use with Plotly Dash. Specifically it extends Bootstrap and Bootswatch to add consistent styling to dash-core-components when using dash-bootstrap-components.
Note: This repository is experimental, and I might break things, or fail to keep up with new releases of Dash. Please use with caution, and open an issue if you discover something that doesn't work as you would expect.
Take a look at the example app in example/. There are instructions on how to
run it in example/README.md.
To use these stylesheets in your own app, simply download the stylesheet of
interest from dist/ and link it in your Dash app. See the
Dash documentation for instructions on how to do this. Each Dash
Bootstrap CSS stylesheet extends either Bootstrap or the Bootswatch theme of
the same name and can be used as a drop in replacement. The additional styling
for Dash components only applies to children of a component with the class
dash-bootstrap applied. This allows you to ensure that Dash Bootstrap CSS will
not interfere with existing styles outside of the children of that component.
For example, to style a dcc.Dropdown with Dash Bootstrap CSS, you would
simply do something like
app.layout = html.Div(dcc.Dropdown(options=[...]), className="dash-bootstrap")Each sheet currently supports dcc.DatePickerSingle, dcc.DatePickerRange,
dcc.Dropdown, dcc.Slider, and dcc.RangeSlider.
The stylesheets are compiled from the SASS source files available in scss/.
The simplest way to build the CSS yourself is to first install dependencies
with npm:
npm install
The build task is managed by Grunt. You can either run
npm run grunt -- build
to build all themes or
npm run grunt -- build:<theme>
to build a specific theme. If you have grunt-cli installed globally, you could
alternatively use a command like
grunt build:<theme>