Bootstrap 5 Alpha 3 has officially arrived bringing some new features, such as a brand new accordion component, floating labels for input form elements, improvements for the block button component, and a few more utility classes and icons.

New accordion component

The accordion component has been completely changed as a standalone component as opposed to being a .card based element, which supposedly solves several problems it had in terms of usability.

The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. Bootstrap 5 alpha 3 included support for a flush accordion (add .accordion-flush) to remove the outer borders, allowing for easier placement inside parent elements.

New block buttons

Block buttons are no more in v5—we’ve dropped the .btn-block class for .d-grid and .gap-* utilities. This allows for the same behavior and style, but with much greater control over spacing, alignment, and even responsive layout options.

Docs improvements

Bootstrap is always looking for new ways to improve our documentation, and this release is no different. We have a ton of changes big and small.

Forms

Forms have some exciting changes thanks to the addition of floating labels as a fully-fledged form layout option and a new file input.

Floating labels

Floating labels include support for textual inputs, selects, and textareas. Bootstrap has one limitation with textareas where multiple lines of text can be obscured by the floating label. Bootstrap is working on fixes for this, so if you have ideas, please let us know!

New file input

Bootstrap’s dropped our custom .form-file class for additional styles in the class. This means we no longer require additional JavaScript to make our file input styles functional—the new form file is all CSS!

Input group rounded corners

Beyond that, we’ve finally resolved ourselves to adding a new class to fix the rounded corners on input groups when using validation. Add the .has-feedback class to the .input-group to enable validation messages inside input groups without any visual regressions. The good news is this is also being backported to v4 in our next release.

Bootstrap 5 Admin Template

Multiple Dashboards & Themes ( Font Awesome 5 Pro + Webpack + Bootstrap 5)

FlexAdmin

Bootstrap 5 Admin Template: Font Awesome 5 Pro + Webpack + Bootstrap 5