Bootstrap 5, the first alpha version is now available. V5 Alpha version no longer depends on jQuery and it has also dropped support for Internet Explorer 9 and 10. It also brings some awesome updates for the Sass files, markup, and a new Utility API.
To start with, first you will need to add Bootstrap 5 asset files in your project. There are multiple ways to include Bootstrap libraries in the project, however we are going to add those files via CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 - Switching from jQuery to Vanilla JS</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Before we start, let’s understand the main reason behind jQuery addition to Bootstrap. Due to lack of targeting elements features in JavaScript, such as query selector, it was hardly possible to do the stuff like below.
$('#selector .child').popover();
With ES6 and introduction of new methods such as document.querySelector methods in JavaScript, you can now easily target some complex element selectors. In Bootstrap V5, you would need to use the following code to enable the popover:
var demoElem = document.querySelector('#selector .child');
var popover = new bootstrap.Popover(demoElem, options);
Bootstrap 5 is designed to be used without jQuery, however it’s still possible to use the components with jQuery. If Bootstrap detects jQuery in the window object it’ll add all of the components in jQuery’s plugin system; this means you’ll be able to do $(‘[data-toggle=”tooltip”]’).tooltip() to enable tooltips. The same goes for the other components. You can read more at official documentation page.
With ES6 and addition of some really cool features in JavaScript, you now should be able to start using Vanilla JS with the most popular framework “Bootstrap V5”. This also helps you save up to 85 KB of data and makes your website even faster!