The final beta for Bootstrap 5 has come with some amazing new changes (including a new component!), documentation updates, and more. It brings fixes for important bugs since the last release, in particular with dependencies. Next up, stable release!
We have offcanvas component, finally!
Thanks to the newest team member, @GeoSot, there is a brand new component in Beta 3 offcanvas! Built on and sharing fundamental pieces of modals, the offcanvas comes with a configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport. Configure these options with
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. </div> </div>
Some highlights from the rest of documentation updates and bugfixes include:
- Added new
.list-group-numberedvariation to list groups that uses pseudo-elements for numbering list group items.
- Removed explicit focus state suppression in Reboot
- Improved carousel swipe behaviors for RTL
- Updated accordions to improve transitions and borders when animating
- Updated Sass customization docs to show how to properly override default variables
- Fixed tooltips not appearing after rapid focus in and out
- Fixed dropdown events not bubbling and forms inside dropdowns not propagating
- Removed flip option from dropdowns
- Disabled select now render consistently in Chrome
- Button elements now grow in
- De-duped the
- Fixed event handler removal in dropdown/carousel dispose
- Added new Parcel guide to the docs
- Added input focus blur Sass variable
.browserslistrcto drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).
Get the release
Head to https://getbootstrap.com to explore the new release. This update is accessible as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.
npm i bootstrap@next
Maintained projects that rely on Bootstrap will be eventually updated to Bootstrap 5.