Given that the latest version of
dash-bootstrap-components 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 from
dash-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
- Bootstrap Migration 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.