How to Switch from jQuery to Vanilla JavaScript with Bootstrap 5

How to Switch from jQuery to Vanilla JavaScript with Bootstrap 5

This tutorial will show you how to start using Vanilla JavaScript instead of jQuery when building websites using the newest version of Bootstrap 5. Bootstrap 5 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

Bootstrap 5 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.

In case you didn't know, Bootstrap 5 alpha has been officially launched. It has removed jQuery as a dependency, has dropped support for Internet Explorer 9 and 10, and brings some awesome updates for the Sass files, markup, and a new Utility API.

This tutorial will show you how to start using VanillaJS instead of jQuery when building websites using the newest version of Bootstrap 5.

Getting started

You will need to include Bootstrap 5 in your project. There are several ways to do this, but to keep it simple we will include the framework via CDN.

First of all, let's create a blank index.html page inside a project folder:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title>
</head>
<body>

</body>
</html>

Include the bootstrap.min.css stylesheet before the end of your <head> tag:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

Afterwards include the Popper.js library and the main Bootstrap JavaScript file before the end of your <body> tag:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Curious what the integrity and crossorigin attributes mean? Here's the explanation:

Integrity attribute: allows the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

Crossorigin attribute: is present when a request is loaded using 'CORS' which is now a requirement of SRI checking when not loaded from the 'same-origin'.

Great! Now we have successfully included the newest version of Bootstrap in our project. One of the obvious differences is that we no longer had to require jQuery as a dependency, saving about 82.54 KB in bandwidth if in a minified state.

bootstrap javascript jquery developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How to Switch from jQuery to Vanilla JavaScript with Bootstrap 5

Learn how to start using VanillaJS instead of jQuery when building websites using the newest version of Bootstrap 5. Bootstrap 5 is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. Bootstrap 5 alpha has been officially launched. It has removed jQuery as a dependency, has dropped support for Internet Explorer 9 and 10, and brings some awesome updates for the Sass files, markup, and a new Utility API.

Hire Dedicated Jquery Developer

Are You Looking To Hire a jQuery Programmer? **[HourlyDeveloper.io](https://hourlydeveloper.io/ "HourlyDeveloper.io")**, a leading jQuery application development company, can help you build interactive front-end solutions to leapfrog the digital...

Bootstrap 5 le dice adiós a jQuery, bienvenido Vanilla JavaScript

El equipo de Bootstrap liberó la versión alpha1 de este popular framework con la principal noticia que reemplazan jQuery por la Vanilla JS. Los cambios más detacados que vienen en Bootstrap 5: Eliminación de jQuery, Cambiar a Vanilla JS, Tamaños de fuente receptivos (RFS), Cambio de Jekyll a Hugo como generador de sitios estácticos, Biblioteca propia de iconos SVG, Optimización de la Barra de Navegación (Navbar), Se deja el soporte para Internet Explorer 10 y 11, Eliminación de QUnit, Cambio de la unidad de medida del ancho de la canaleta, Se han eliminado los mazos de cartas, Actualizaciones de clase

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.