🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Dash-bootstrap-components v1 - beta release available

Hi everyone! It’s almost three years since we made the first public release of dash-bootstrap-components. I’m very excited to announce that today we made available the first beta for version 1. There’s loads of new features and quite a few changes, so we would love for people to try it out and give us feedback before we roll this out fully. Hope you like it!

The headline update is that we’re now supporting Bootstrap v5! This means dash-bootstrap-components is compatible with the latest themes and templates, and also means we get to add some exciting new components (see below). We also have new bundled themes, icons, and a bunch of new examples in the documentation.

There’s loads more detail below. You can install right now for Python with

pip install --upgrade --pre dash-bootstrap-components

and check out the preview of the version 1 documentation here. If you have feedback or find problems please reply here or raise an issue on our GitHub repository.

Anyone looking to try out the R of Julia versions get in touch, they’re also ready to go but a bit harder to distribute pre-releases in each case.

Breaking changes

There are some breaking changes. The following components have been removed: CardColumns, CardDeck, FormGroup, InputGroupAddon, Jumbotron, ListGroupItemHeading, ListGroupItemText. Additionally there are a number of changes to individual props. Please take a look at our migration guide for more details.

dash-bootstrap-components also now has Dash>=2 as a dependency, which in particular means we are only going to support Python 3.6+ once dbc-v1 is released.

New themes

Courtesy of Bootswatch, there are 4 new themes to choose from: MORPH, QUARTZ, VAPOR, and ZEPHYR. See screenshots below or check out the theme explorer to see more (I really like VAPOR)

Icons

Easily add Bootstrap Icons or Font Awesome icons to your app using CDN links as part of dbc.icons.

New components

Accordion

This is a new component in Bootstrap 5. Previously something similar was possible using multiple collapse components and a complicated callback, now let the new Accordion component do the hard work for you. Check out documentation here.

ezgif.com-gif-maker

Breadcrumb

This isn’t new in Bootstrap 5, but is new to dash-bootstrap-components. A nice way to structure navigation links in your app.

Screenshot 2021-09-11 at 16.28.31

FormFloating

New in Bootstrap 5. Add labels to input fields that float over the input when the user moves to type into it

ezgif.com-gif-maker (1)

Offcanvas

Also new in Bootstrap 5. Allows you to create a hidden sidebar that can be toggled with callbacks to help navigation in your app.

ezgif.com-gif-maker (2)

Pagination

Not new in Bootstrap 5, but new to dash-bootstrap-components. Pagination style buttons that can be used to trigger callbacks and load content from the server.

Screenshot 2021-09-11 at 16.35.50

Switch

Much like the existing RadioButton and Checkbox components, but renders a toggle-like switch instead.

ezgif.com-gif-maker (3)

17 Likes

Wow these new components look so exciting, gonna try them out asap :yum:

Thank you @tcbegley for providing and maintaining this amazing library.

4 Likes

:clap: :clap: :clap: :clap: :clap: :clap:
awesome!!

2 Likes