kevinnnnqin / dash-bootstrap-components

Bootstrap components for Plotly Dash

Dash Bootstrap Components

Bootstrap components for Plotly Dash
Explore the documentation · Report a bug · Request a feature

dash-bootstrap-components is a library of Bootstrap components for use with Plotly Dash, that makes it easier to build consistently styled Dash apps with complex, responsive layouts.

Table of contents

• Installation
• Quick start
• Contributing
• Copyright and license

Installation

PyPI

You can install dash-bootstrap-components with pip:

pip install dash-bootstrap-components

Anaconda

You can also install dash-bootstrap-components with conda through the conda-forge channel:

conda install -c conda-forge dash-bootstrap-components

Dash for R

You can now use dash-bootstrap-components with Dash for R! Note that support for Dash for R is still in beta so proceed with caution. If you try it out and run into issues, please let us know! To get started make sure you have the devtools library installed

install.packages("devtools")

You can then install dash-bootstrap-components from the r-release branch of this repository.

library(devtools)
install_github('facultyai/dash-bootstrap-components@r-release')

Check out the docs for more details

Quick start

To use dash-bootstrap-components you must do two things:

• Link a Bootstrap v4 compatible stylesheet
• Incorporate dash-bootstrap-components into your layout

Linking a stylesheet

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. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.

For convenience, links to BootstrapCDN for each theme are available through the themes module, which can be used as follows:

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

For more information on how to link local or external CSS, check out the Dash documentation.

Build the layout

With CSS linked, you can start building your app's layout with our Bootstrap components. See our documentation for a full list of available components, which include:

Standard row and column-based layouts

---

Cards

---

Tabs

---

Forms

---

Dropdown menus

---

Tooltips

... and many more.

Contributing

We welcome contributions to dash-bootstrap-components. If you find a bug or something is unclear please submit a bug report, if you have ideas for new features please feel free to make a feature request. If you would like to submit a pull request, please read our contributing guide.

Copyright and license

Code and documentation is copyright Faculty Science Ltd. 2018-2021, and released under the Apache 2.0 license