Switching from jQuery to Vanilla JS with Bootstrap V5

   JavaScript

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.

Getting Started

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>

jQuery to Vanilla JS with Bootstrap V5

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);

You can still use jQuery!

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.

Conclusion

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!

Tags: Bootstrap 5Bootstrap V5 AlphaCSS FrameworkJavaScript

Leave a Comment