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!
Finally We Have Offcanvas Component
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 data
attributes or via the JavaScript APIs.
<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-numbered
variation 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
.nav-fill
and.nav-justified
- JavaScript plugin constructors now accept CSS selectors
- De-duped the
.border-0
utility - Fixed event handler removal in dropdown/carousel dispose
- Added new Parcel guide to the docs
- Added input focus blur Sass variable
- Updated
.browserslistrc
to drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).
Head to GitHub for a complete list of issues and pull requests in v5 Beta 3. You can also review the v5 beta 3 project board, too.
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