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-components V1 announcement
• Bootstrap Migration Guide
• dash-bootstrap-components Migration Guide

I hope this Cheatsheet makes it easier for you to use dbc V1 and Bootstrap 5 in your Dash app.