125 lines
4.8 KiB
Markdown
125 lines
4.8 KiB
Markdown
|
<p align="center">
|
|||
|
|
<a href="https://www.dash-bootstrap-components.com/">
|
|||
|
|
<img src="https://cdn.jsdelivr.net/gh/dbc-team/dash-bootstrap-components@main/readme-images/logo.png" alt="dash-bootstrap-components logo" width="200" height="200">
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h3 align="center">Dash Bootstrap Components</h3>
|
|||
|
|
|
|||
|
|
<p align="center">
|
|||
|
|
Bootstrap components for Plotly Dash
|
|||
|
|
<br>
|
|||
|
|
<a href="https://www.dash-bootstrap-components.com/">Explore the documentation</a>
|
|||
|
|
·
|
|||
|
|
<a href="https://github.com/dbc-team/dash-bootstrap-components/issues/new?template=bug.md">Report a bug</a>
|
|||
|
|
·
|
|||
|
|
<a href="https://github.com/dbc-team/dash-bootstrap-components/issues/new?template=feature.md">Request a feature</a>
|
|||
|
|
<br>
|
|||
|
|
<br>
|
|||
|
|
<img alt="GitHub Actions" src="https://github.com/dbc-team/dash-bootstrap-components/actions/workflows/tests.yml/badge.svg">
|
|||
|
|
<img alt="GitHub" src="https://img.shields.io/github/license/dbc-team/dash-bootstrap-components">
|
|||
|
|
<img alt="PyPI" src="https://img.shields.io/pypi/v/dash-bootstrap-components">
|
|||
|
|
<img alt="Conda (channel only)" src="https://img.shields.io/conda/vn/conda-forge/dash-bootstrap-components">
|
|||
|
|
<img alt="PyPI - Python Version" src="https://img.shields.io/pypi/pyversions/dash-bootstrap-components">
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
_dash-bootstrap-components_ is a library of [Bootstrap][bootstrap-homepage]
|
|||
|
|
components for use with [Plotly Dash][dash-homepage], that makes it easier to
|
|||
|
|
build consistently styled Dash apps with complex, responsive layouts.
|
|||
|
|
|
|||
|
|
## Table of contents
|
|||
|
|
|
|||
|
|
- [Installation](#installation)
|
|||
|
|
- [Quick start](#quick-start)
|
|||
|
|
- [Contributing](#contributing)
|
|||
|
|
- [Copyright and license](#copyright-and-license)
|
|||
|
|
|
|||
|
|
## Installation
|
|||
|
|
|
|||
|
|
### PyPI
|
|||
|
|
|
|||
|
|
You can install _dash-bootstrap-components_ with `pip`:
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
pip install dash-bootstrap-components
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### Anaconda
|
|||
|
|
|
|||
|
|
You can also install _dash-bootstrap-components_ with `conda` through the
|
|||
|
|
conda-forge channel:
|
|||
|
|
|
|||
|
|
```sh
|
|||
|
|
conda install -c conda-forge dash-bootstrap-components
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Quick start
|
|||
|
|
|
|||
|
|
To use _dash-bootstrap-components_ you must do two things:
|
|||
|
|
|
|||
|
|
- Link a Bootstrap v5 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 v5 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][bootstrapcdn] for each theme are
|
|||
|
|
available through the `themes` module, which can be used as follows:
|
|||
|
|
|
|||
|
|
```python
|
|||
|
|
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][dash-docs-external].
|
|||
|
|
|
|||
|
|
### Build the layout
|
|||
|
|
|
|||
|
|
With CSS linked, you can start building your app's layout with our Bootstrap
|
|||
|
|
components. These include layout components for organising the content of your app on the page, as well as UI components like navbars, cards, alerts and many more.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
See our [_documentation_][docs-components] for a full list of available
|
|||
|
|
components.
|
|||
|
|
|
|||
|
|
## Contributing
|
|||
|
|
|
|||
|
|
We welcome contributions to _dash-bootstrap-components_. If you find a bug or
|
|||
|
|
something is unclear please [submit a bug report][bug-report], if you have ideas
|
|||
|
|
for new features please feel free to make a [feature request][feature-request].
|
|||
|
|
|
|||
|
|
If you would like to submit a pull request, please read our
|
|||
|
|
[contributing guide][contribution-guide], which contains instructions on how to
|
|||
|
|
build and install _dash-bootstrap-components_ locally, how to check your code
|
|||
|
|
will pass our linting checks, and how to submit the pull request itself.
|
|||
|
|
|
|||
|
|
## Acknowledgements
|
|||
|
|
|
|||
|
|
The _dash-bootstrap-components_ maintainers would like to thank [Faculty][faculty] for their early support in helping this project get off the ground. Since 2025, it has been maintained by the Dash community.
|
|||
|
|
|
|||
|
|
## Copyright and license
|
|||
|
|
|
|||
|
|
Copyright © 2018–2025 [Faculty Science Ltd.][faculty]
|
|||
|
|
Copyright © 2025 the _dash-bootstrap-components_ maintainers
|
|||
|
|
|
|||
|
|
Released under the [Apache 2.0 license](https://github.com/dbc-team/dash-bootstrap-components/blob/main/LICENSE).
|
|||
|
|
|
|||
|
|
|
|||
|
|
[dash-homepage]: https://dash.plotly.com/
|
|||
|
|
[dash-docs-external]: https://dash.plotly.com/external-resources
|
|||
|
|
[bootstrap-homepage]: https://getbootstrap.com/
|
|||
|
|
[docs-components]: https://www.dash-bootstrap-components.com/docs/components
|
|||
|
|
[bootstrapcdn]: https://www.bootstrapcdn.com/
|
|||
|
|
[faculty]: https://faculty.ai
|
|||
|
|
[bug-report]: https://github.com/dbc-team/dash-bootstrap-components/issues/new?template=bug.md
|
|||
|
|
[feature-request]: https://github.com/dbc-team/dash-bootstrap-components/issues/new?template=feature.md
|
|||
|
|
[contribution-guide]: https://github.com/dbc-team/dash-bootstrap-components/blob/main/.github/CONTRIBUTING.md
|