Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/annmariew/dash-bootstrap-cheatsheet
A guide for using Bootstrap 5 classes in Dash Bootstrap Components V1
https://github.com/annmariew/dash-bootstrap-cheatsheet
bootstrap plotly-dash
Last synced: about 1 month ago
JSON representation
A guide for using Bootstrap 5 classes in Dash Bootstrap Components V1
- Host: GitHub
- URL: https://github.com/annmariew/dash-bootstrap-cheatsheet
- Owner: AnnMarieW
- Created: 2021-09-15T19:55:10.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-27T19:20:40.000Z (almost 2 years ago)
- Last Synced: 2024-04-16T17:40:01.834Z (7 months ago)
- Topics: bootstrap, plotly-dash
- Language: Python
- Homepage:
- Size: 165 KB
- Stars: 20
- Watchers: 1
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# dash-bootstrap-cheatsheet
This handy interactive cheatsheet makes it easy to use the Bootstrap 5 classes with your Dash app
made with the latest version of *dash-bootstrap-components* V1.0
### See it live at https://dashcheatsheet.pythonanywhere.com/
### Note - this is a WIP. If you have any comments or suggestions or just want to give some :heart: Please open an issue.
## Background
If you are upgrading from `dash-bootstrap-components` v0.13 (which uses Bootstrap 4) you will find lots of cool new features – but also some breaking changes. This is mainly because Bootstrap 5 is a major rewrite of the Bootstrap project. Not only are there changes to some of the components, but there are also many new and renamed utility classes.
One example is Bootstrap 5 now supports RTL, so classes are renamed “start” and “end” instead of “left” and “right”. This means the new way to set left or right margin is className="ms-2 me-4" rather than className="ml-2 mr-4". There are also many new things like the opacity classes, and classes that make it easier to make components like: image
For more information see
- `dash-bootstrap-components` [V1 announcement](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/5)
- [Bootstrap Migration Guide](https://getbootstrap.com/docs/5.0/migration/)
- `dash-bootstrap-components` [Migration Guide](https://dbc-v1.herokuapp.com/migration-guide/)
I hope this Cheatsheet makes it easier for you to use dbc V1 and Bootstrap 5 in your Dash app.
---
-
---
