Bootstrap 5 beta has finally arrived
After a long wait, Bootstrap 5-beta has arrived.
After the release of Alpha versions (from 5.0.0-alpha1 released 16 June 2020, up to version 5.0.0-alpha3 released 11 November 2020), version 5.0.0-beta1 was finally officially released on 7 December 2020.
Update: Bootstrap 5 Beta 3 has been released on 23 March 2021, with some updates and a new component.
The new version, is currently downloadable as a pre-release to NPM or can be included via jsDelivr CDN.
Some of the biggest changes are the complete removal of jQuery from the framework and the abandonment of support for Internet Explorer 10 and 11.
How to try Bootstrap 5 Beta
As usual, integrating Bootstrap into a web page very is simple.
There are two ways to include the framework within your project: using jsDelivr or using a package manager.
Bootstrap 5 CDN via jsDelivr
JsDelivr is a free open source CDN.
The only thing you have to do to include Bootstrap’s CSS is to copy-paste the stylesheet <link> into your <head> before all other stylesheets.
To include Bootstrap 5 using CDN you simply need to include:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">In addition, many components need to use JavaScript to work. An easy way to include every script we need is to include the entire distribution bundle:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>However, if you need more customization, the official Bootstrap guide offers a wide range of choices for integrating the framework into your code.
Bootstrap 5 via NPM
Bootstrap is also available as a Node.js module.
At this time it is possible to include bootstrap within an NPM project by referencing the bootstrap@next package:
npm install --save bootstrap@nextBootstrap 5 Beta 3 update
The Bootstrap team released Bootstrap 5 – Beta 3 on 23 March 2021. From what the team says, the Bootstrap 5 beta 3 will be the final version before the stable release. Unfortunately, it is not yet clear when Bootstrap 5 will be out of beta, but we will update this article as soon as we have more information.
That’s said, let’s see the new component. Indeed, one of the biggest changes of the new beta version is the new “Offcanvas” component. Offcanvas is a sidebar component that can be toggled via JavaScript from, for example, buttons and appear from the left, right, or from the bottom of the viewport.
Below an example of the Offcanvas component as a left sidebar:
To implement the Offcanvas component you can use the following code as example:
<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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est nibh, ullamcorper vel felis vitae, ultricies
ullamcorper risus. Nam venenatis odio sit amet neque blandit consectetur.
</div>
</div>Other resources: