dash-bootstrap-css

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 project is still in its infancy, and so far only styles for dcc.DatePickerRange, dcc.DatePickerSingle and dcc.Dropdown have been added, and not extensively tested. Use with caution.

Getting started

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

Building

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>