GoranStimac.com



Bootstrap 5 Beta 3 Is Here

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

Related Posts