Hey Everyone
Given that the latest version of dash-bootstrap-components v1.0 is based on Bootstrap 5, I made this handy interactive cheatsheet for using Bootstrap 5 classes in your Dash app.
See it live at: Dash Bootstrap Cheatsheet
If you are upgrading fromdash-bootstrap-components v0.13 (which used 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: 
For more information see
-
dash-bootstrap-componentsV1 announcement - Bootstrap Migration Guide
-
dash-bootstrap-componentsMigration Guide
Hopefully this Cheatsheet will help make it easier to use dbc V1 and Bootstrap 5 in your Dash app.
Note this live site may be moving - so if the link is broken, check GitHub for the latest info.
.
