Installing with npm and Vite

A CDN is handy for first steps, but in a real project Bootstrap is usually installed with npm, the Node.js package manager. Then the files live in the project, the version is recorded in package.json, and the Vite bundler combines and minifies them together with your code. You need Node.js 20 or newer.

Creating a project

Create a Vite project from the vanilla template — plain HTML and JavaScript without a framework:

npm create vite@latest tasko -- --template vanilla
cd tasko
npm install
npm install bootstrap @popperjs/core

The last command adds Bootstrap and Popper, the library Bootstrap's scripts use for dropdowns and tooltips.

Project structure

tasko/
├── index.html        the main page
├── package.json      dependencies and commands
├── public/           files copied as they are
└── src/
    ├── main.js       the entry point: everything else is loaded from here
    └── style.css     your styles

The template puts demo code with a counter into src/ — you can delete it.

Adding Bootstrap

Replace the contents of src/main.js:

// src/main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import './style.css';
import 'bootstrap';

The first line loads Bootstrap's styles, the second loads yours (they come after so they can override). The third starts the scripts: buttons with data-bs-* attributes will open modals and menus.

index.html already loads main.js. Keep the page markup in it:

<div class="container py-4">
  <h1>Tasko</h1>
  <button class="btn btn-primary">Try it</button>
</div>
<script type="module" src="/src/main.js"></script>

The <script type="module"> tag is already in the template; add the markup above it inside <body>. The preview has no styles: Vite adds them through main.js.

Running and building

npm run dev

Open http://localhost:5173 — the page is styled by Bootstrap and reloads whenever you save a file. The production version is built with:

npm run build

The result appears in the dist/ folder: its contents are what you upload to hosting.

Components from JavaScript

When you need to call a component from code, import its class by name:

// src/main.js
import { Modal } from 'bootstrap';
 
const modal = new Modal('#welcome');
modal.show();

This opens the modal with id="welcome". Modals are covered in detail in the interactive components chapter.

Common mistake

Writing bootstrap.Modal or bootstrap.Tooltip in code, as in the CDN examples. With npm there is no global bootstrap variable — the console shows bootstrap is not defined. Import the class you need: import { Tooltip } from 'bootstrap'.