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://email@example.com/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>
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.