Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

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)

30 Likes

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

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

6 Likes

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

3 Likes

This is awesome!! The accordion is a really great addition.

Now I wonder… can we insert accordion elements inside individual datatable cells? What about as a whole datatable row with columns?.. :thinking:

Like previous comments… 1.0 is awesome! And having implemented an accordion in 0.13, I’m really impressed by the new Accordion compoment and how easy to manage an accordion now.

2 Likes

Thanks everyone for helpful feedback for the last several weeks. Happy to say that v1 is now live! Please continue to share feedback / report bugs.

Note that we’ve switched over the docs, so v1 documentation is now at https://dash-bootstrap-components.opensource.faculty.ai/

v0 documentation is available for reference at https://dbc-v0.herokuapp.com/ until people have had a chance to migrate existing apps.

Huge thanks to @AnnMarieW and @glsdown who made massive contributions to make this possible.

3 Likes

The migration guide seems to be down: https://dbc-v1.herokuapp.com/migration-guide/

Ah yes, it’s now available at the main docs https://dash-bootstrap-components.opensource.faculty.ai/migration-guide/

That Heroku app was just for hosting the preview docs before we switched over.

Hey, love the work done here :slight_smile:

Just a bit of feedback on this v1 release of stuff that used to work slightly better:

  • With the popover with “legacy” trigger, clicking the popover itself dismisses it which is not what it was supposed to do (dismiss when clicking outside).
  • It looks like the hide_arrow and offset do not work on the Popover?
  • With the DropdownMenu, clicking outside of the menu used to close it but it doesn’t anymore and it looks like we now either have to click the button or a DropdownItem. Maybe adding support for Escape to close the menu would make sens too?

Thanks for these!

Have raised an issue and will look into them.

1 Like

Great, Awesome!

FanTASTIC stuff, Tom. The themes and style updates are killer. Really great work.

3 Likes