how to install bootstrap with npm ?

What you will read?

1 Prepare Node and npm
2 Initialize a project directory
3 Install Bootstrap and Popper with npm
4 Add Bootstrap CSS to your app
5 Enable Bootstrap JavaScript
6 Verify with a working component
7 Optional: Customize with Sass
8 Load only what you need (tree-shake)
9 Update and maintain versions
10 Common fixes

Installing Bootstrap with npm gives predictable versions, modular imports, and optimized builds. Set up Node and npm, add Bootstrap and Popper, wire CSS and JS through a bundler or plain HTML, verify interaction with a component, and optionally customize with Sass. Steps work on Linux, macOS, and Windows terminals.

Prepare Node and npm

Confirm Node.js and npm are available. LTS versions are recommended for stability when managing Bootstrap dependencies.

node -v
npm -v

v20.11.1
10.5.0

Initialize a project directory

Create a clean workspace and initialize package.json so npm can track Bootstrap and related packages.

mkdir my-bootstrap-app
cd my-bootstrap-app
npm init -y

Install Bootstrap and Popper with npm

Install the latest Bootstrap. Add Popper for tooltips, dropdowns, and other interactive components.

npm i bootstrap @popperjs/core

added 2 packages, and audited 2 packages in 2s
found 0 vulnerabilities

Add Bootstrap CSS to your app

Two common patterns: import via a bundler (Vite/Webpack/Parcel) or link directly in HTML during local development.

Using a bundler (recommended)

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

Without a bundler (dev only)

<!-- index.html -->
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">

Linking to node_modules is fine for local testing. For production, copy assets into your public/build folder or rely on a bundler.

Enable Bootstrap JavaScript

Bootstrap’s interactive components need JS. Use the bundle (includes Popper) or import in your JS entry file.

Using a bundler

// src/main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap' // loads bootstrap.bundle with Popper

Without a bundler (dev only)

<!-- index.html, place before </body> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

Verify with a working component

Start a quick static server and test a modal to ensure both CSS and JS are active.

npm i -D serve
npx serve . -p 5173

<!-- index.html -->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap via npm</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body class="p-4">
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#demoModal">Open modal</button>

    <div class="modal fade" id="demoModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">NPM Bootstrap Works</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">CSS + JS loaded successfully.</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Optional: Customize with Sass

Use Sass to override variables and compile a smaller, themed build.

npm i -D sass

// src/styles.scss
$primary: #6f42c1;
$font-size-base: 1rem;
@import "bootstrap/scss/bootstrap";

npx sass src/styles.scss public/styles.css --style=compressed

<!-- index.html -->
<link rel="stylesheet" href="/public/styles.css">

Load only what you need (tree-shake)

Import individual components to reduce bundle size when using a bundler.

// src/main.js
import 'bootstrap/dist/css/bootstrap.min.css'
import Dropdown from 'bootstrap/js/dist/dropdown'
import Tooltip from 'bootstrap/js/dist/tooltip'

// Enable tooltips globally (example)
document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new Tooltip(el))

Update and maintain versions

Keep Bootstrap current for security and features, and pin versions for stability in production.

npm outdated
npm update bootstrap
npm i bootstrap@latest
npm i @popperjs/core@latest

Common fixes

Resolve frequent issues quickly.

# Missing interactivity? Ensure the bundle (with Popper) is loaded:
import 'bootstrap'              # bundler
# or
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

# Path errors when serving node_modules? Copy assets or use a bundler.
cp node_modules/bootstrap/dist/css/bootstrap.min.css public/bootstrap.min.css
cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js public/bootstrap.bundle.min.js

# Corrupted install? Reinstall cleanly.
rm -rf node_modules package-lock.json
npm ci

You installed Bootstrap with npm, wired CSS and JS, validated components, and learned Sass customization, tree-shaking, and updates. For more reading, guidance, and to purchase various servers with support, use dropvps.