Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Dash & Bootstrap 5

Hey Everyone

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

12 Likes

Awesome, thanks for sharing!

1 Like