# Dash-bootstrap-components v1 - beta release available

**URL:** <https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526>\
**Category:** Dash Python\
**Tags:** show-and-tell, announcements\
**Created:** [September 11, 2021, 4:15pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526 "2021-09-11T16:15:06Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [September 11, 2021, 4:15pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/1 "2021-09-11T16:15:06Z")

</div>

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

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

```

and check out the preview of the version 1 documentation [here](https://dbc-v1.herokuapp.com/migration-guide/). If you have feedback or find problems please reply here or raise an issue [on our GitHub repository](https://github.com/facultyai/dash-bootstrap-components).

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](https://dbc-v1.herokuapp.com/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](https://dbc-v1.herokuapp.com/docs/themes/explorer/) to see more (I really like `VAPOR`)

 ![themes](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/9/09869c1a4036562e3cb078251faec3306c9bb123.jpeg)

## Icons

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

 ![Screenshot 2021-09-11 at 17.01.17](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/9/d9d2e87d9cd3878435aefe452f0801de53ec78c9.png)

## 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](https://dbc-v1.herokuapp.com/docs/components/accordion/).

![ezgif.com-gif-maker](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/1/41a1209a6750563aead3a06ba5f884800310f0fe.gif)

### 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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/d/6de0e97987ac8f89c6870a067e845c6a0d050be1.png)

### 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)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/1/4/143cfcadc73197b8cd3acf5017d7e734a6d8ebf6.gif)

### 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)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/9/690c1e732a5e1add4767d09b585b6378a9ced2a6.gif)

### 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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/2/5/25e35f433bc00fec5b25f6fd5cd44aec575657c2.png)

### Switch

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

![ezgif.com-gif-maker (3)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/1/91098b077c82d12772c1f91c5bb90f8960e72f6e.gif)

---

<div class="post-metadata">

**Author:** ![chriddyp](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/chriddyp/32/16855_2.png) [@chriddyp](https://community.plotly.com/u/chriddyp)\
**Post date:** [September 11, 2021, 5:58pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/2 "2021-09-11T17:58:56Z")

</div>

Pinned on September 11, 2021, 5:58pm UTC



---

<div class="post-metadata">

**Author:** ![atharvakatre](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/atharvakatre/32/14713_2.png) [@atharvakatre](https://community.plotly.com/u/atharvakatre)\
**Post date:** [September 11, 2021, 7:32pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/3 "2021-09-11T19:32:47Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![xianhu](https://avatars.discourse-cdn.com/v4/letter/x/4da419/32.png) [@xianhu](https://community.plotly.com/u/xianhu)\
**Post date:** [September 18, 2021, 2:26am UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/5 "2021-09-18T02:26:49Z")

</div>

👏 👏 👏 👏 👏 👏  
awesome！！

---

<div class="post-metadata">

**Author:** ![z.adamg](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/z.adamg/32/21232_2.png) [@z.adamg](https://community.plotly.com/u/z.adamg)\
**Post date:** [October 5, 2021, 2:12am UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/6 "2021-10-05T02:12:14Z")

</div>

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?.. [🤔](https://emojipedia.org/thinking-face/)

---

<div class="post-metadata">

**Author:** ![jouvin](https://avatars.discourse-cdn.com/v4/letter/j/c67d28/32.png) [@jouvin](https://community.plotly.com/u/jouvin)\
**Post date:** [October 19, 2021, 10:16pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/9 "2021-10-19T22:16:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [October 20, 2021, 8:54am UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/10 "2021-10-20T08:54:28Z")

</div>

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/](https://dash-bootstrap-components.opensource.faculty.ai/)

v0 documentation is available for reference at [https://dbc-v0.herokuapp.com/](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.

---

<div class="post-metadata">

**Author:** ![oegedijk](https://avatars.discourse-cdn.com/v4/letter/o/a88e57/32.png) [@oegedijk](https://community.plotly.com/u/oegedijk)\
**Post date:** [October 23, 2021, 7:36pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/11 "2021-10-23T19:36:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [October 23, 2021, 7:47pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/12 "2021-10-23T19:47:31Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![RenaudLN](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/renaudln/32/9041_2.png) [@RenaudLN](https://community.plotly.com/u/RenaudLN)\
**Post date:** [October 24, 2021, 2:28am UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/13 "2021-10-24T02:28:12Z")

</div>

Hey, love the work done here 🙂

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?

---

<div class="post-metadata">

**Author:** ![tcbegley](https://avatars.discourse-cdn.com/v4/letter/t/46a35a/32.png) [@tcbegley](https://community.plotly.com/u/tcbegley)\
**Post date:** [October 24, 2021, 6:27am UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/14 "2021-10-24T06:27:27Z")

</div>

Thanks for these!

Have raised [an issue](https://github.com/facultyai/dash-bootstrap-components/issues/750) and will look into them.

---

<div class="post-metadata">

**Author:** ![dameng](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/dameng/32/14605_2.png) [@dameng](https://community.plotly.com/u/dameng)\
**Post date:** [October 28, 2021, 1:51pm UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/15 "2021-10-28T13:51:27Z")

</div>

Great, Awesome!

---

<div class="post-metadata">

**Author:** ![russellthehippo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/russellthehippo/32/25312_2.png) [@russellthehippo](https://community.plotly.com/u/russellthehippo)\
**Post date:** [November 8, 2021, 3:29am UTC](https://community.plotly.com/t/dash-bootstrap-components-v1-beta-release-available/56526/16 "2021-11-08T03:29:13Z")

</div>

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