Announcing Dash Bio 1.0.0 ๐ŸŽ‰ : a one-stop-shop for bioinformatics and drug development visualizations.

Dash Bootstrap Components Cheatsheet

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: image

For more information see

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.


.

cheatsheet

18 Likes

Awesome, thanks for sharing!

1 Like

I just updated the cheatsheet for the official release of Dash Bootstrap Components V1.0 released yesterday :confetti_ball:

3 Likes