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
❤️
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-componentsV1 announcement- Bootstrap Migration Guide
dash-bootstrap-components
I hope this Cheatsheet makes it easier for you to use dbc V1 and Bootstrap 5 in your Dash app.
