Import Bootstrap 5 in Electron.js 6

Electron.js, being a web application in its bases, we can use all kinds of libraries, tooltip, etc, as in this case, it is Bootstrap:

https://getbootstrap.com/

To do this, we have the following command that we must execute on the project in Electron generated previously:

$ npm install bootstrap

And with the previous command, we already have Bootstrap ready in the project, to configure it we have several ways, this time, we are going to load Bootstrap based on an import to it in a CSS file:

css/index.css

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Which we will use, from our html page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
   <button class="btn btn-primary">Button</button>
</body>
</html>

And that would be all, and with this, we can use Bootstrap without problems, if you want to use another library like Tailwind or similar, they are the same steps that you must follow:

Install the package in Node
Create a CSS file in which you place the dependencies of the library
Load the above file into your HTML file.

The next thing we will see is how to activate the devtool in the browser with Electron.js

Remember that the previous material is part of mi curso completo sobre Electron.js

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy