Module 3 : Installing Bootstrap via NPM & Package Managers.
installBootstrap
Using a package manager (like npm) brings several advantages:
Version control & reproducibility: the exact Bootstrap version is tracked in package.json/package-lock.json/pnpm-lock.yaml.
Customization: installing the source Sass files lets you override variables and rebuild only the parts you need.
Bundling: modern build tools can tree-shake and include only the JS you use, reducing final bundle size.
Ecosystem: easy access to related packages like bootstrap-icons, react-bootstrap, or Popper if needed.
Choose the compiled build (prebuilt CSS/JS) for speed and simplicity; choose the source (SCSS) when you want deep theming and outputs optimized for your design system.
2. Package choices
npm (recommended / most common)
npm init -y
npm install bootstrap@latest
# or pin a version
npm install bootstrap@5.3.8
yarn
yarn init -y
yarn add bootstrap
pnpm
pnpm init
pnpm add bootstrap
bun
bun init
bun add bootstrap
Note: package-managed installs typically add Bootstrap's CSS/JS source files to node_modules/bootstrap. Depending on your deployment workflow you should either copy the needed files into your public/ folder or import them into your bundler entry file.
3. installed — compiled vs source files
bootstrap/dist/css/bootstrap.min.css — compiled, production-ready CSS.
bootstrap/dist/js/bootstrap.bundle.min.js — compiled JavaScript including Popper (useful for tooltips/popovers). The bundle file contains Popper so you won’t need to install Popper separately when using the bundle.
bootstrap/scss/ — source Sass files for customization.
bootstrap/js/dist/ — per-plugin JS modules (e.g., alert.js, modal.js) for imports.
4. static site using npm-managed files (no bundler)
Goal: Install Bootstrap with npm and serve a static page that references the files in node_modules
(development/demo purpose).
npm init -y
npm install bootstrap
Create index.html and reference the dist files:
<!-- index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container py-5">
<h1 class="text-primary">Hello Bootstrap (npm)</h1>
<button class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip!">Hover me</button>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Serving node_modules directly in production is not recommended; instead copy these assets to your public/ directory in a build step or import them via a bundler.
The bootstrap.bundle file includes Popper, so tooltip/popover features work out of the box.
5. Modern workflow using Vite
Goal: Use Vite to bundle assets and import Bootstrap CSS and JS properly.
Commands:
npm create vite@latest my-bootstrap-vite --template vanilla
cd my-bootstrap-vite
npm install
npm install bootstrap
# optional: npm install sass if you plan to use SCSS
src/main.js
// import compiled CSS
import 'bootstrap/dist/css/bootstrap.min.css'
// import all Bootstrap JS (you can also import specific plugins)
import 'bootstrap'
console.log('Bootstrap loaded')
index.html should contain your markup. Vite will bundle CSS and JS into the final build.
Smarter option — JS imports (smaller bundles):
import 'bootstrap/dist/css/bootstrap.min.css'
import Tooltip from 'bootstrap/js/dist/tooltip'
import Modal from 'bootstrap/js/dist/modal'
// initialize tooltips manually
const t = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
.map(el => new Tooltip(el))
This approach avoids importing unused plugin code and helps tree-shaking.
6. Method C — Customize Bootstrap using SCSS
When: You want to change theme variables (colors, breakpoints, button radii) and produce a single custom stylesheet.
Steps:
npm install bootstrap sass
Create src/scss/custom.scss
// custom.scss
// 1) override any variables you need BEFORE importing the rest
$primary: #1f6feb; // custom primary color
$body-bg: #f6f8fb;
// 2) import Bootstrap
@import "bootstrap/scss/bootstrap";
Build the stylesheet with the dart-sass CLI:
// package.json: scripts
"scripts": {
"build:css": "sass src/scss/custom.scss dist/css/styles.css --style=compressed"
}
npm run build:css and reference dist/css/styles.css in your HTML.
Tips :
Place variable overrides before the main import so Bootstrap picks them up.
You can @import only the SCSS partials you need (e.g., utilities, buttons) for smaller CSS output — this requires understanding file dependencies in bootstrap/scss.
7. Integrating with frameworks (React / Vue / Angular)
For React + React-Bootstrap: npm install react-bootstrap bootstrap and import CSS (import 'bootstrap/dist/css/bootstrap.min.css') into your entry file. Using react-bootstrap gives you React components mirroring Bootstrap.
For a component library or design system, prefer SCSS source installs and compile into your global theme.
8. (expected outcome)
Exercise 1 — Quick install and verify
Create a new folder, npm init -y, npm install bootstrap, create index.html that loads bootstrap.min.css and bootstrap.bundle.min.js from node_modules. Add a button with btn btn-success.
Expected: Button styled green; JS features (dropdown/tooltip) working if used.
Why this helps: Verifies that package files are present and path references are correct.
Exercise 2 — SCSS override
Install bootstrap and sass. Create custom.scss, override $primary, build the CSS and confirm the new primary color is used by .btn-primary.
Expected: Buttons styled with your custom primary color.
Why: variable overrides and the SCSS build pipeline.
Exercise 3 — Modular JS import
Using a bundler (Vite/webpack), import only Tooltip from bootstrap/js/dist/tooltip and initialize tooltips on page elements.
Expected: Tooltip functionality works and the final JS bundle is smaller than importing the entire bootstrap package.
Why: Demonstrates tree-shaking and selective imports.
Exercise 4 — Use yarn & pnpm
Task: Repeat Exercise 1 using yarn and then pnpm. Note node_modules layout differences (pnpm uses a content-addressable store and symlinks).
Expected: Same runtime behavior; observe pnpm's symlink layout in node_modules.
Why: Shows differences between package managers.
9. "Custom Bootstrap"
Objective: Build a small demo app that uses a custom SCSS theme and a modal triggered by JavaScript. Measure bundle size and compare "full import" vs import".
Steps
npm init -y and npm install bootstrap sass vite.
Create src/scss/custom.scss and override 3 variables (primary, border-radius, body-bg).
npm run build:css to produce dist/css/styles.css.
Create index.html and src/main.js that imports dist/css/styles.css and uses modular JS import for only modal (e.g., import Modal from 'bootstrap/js/dist/modal').
Build with vite build and inspect the dist/ bundle — record file sizes.
Repeat step 4 but instead import 'bootstrap' (full import) and compare final JS size.
Measurements & Acceptance Criteria:
SCSS build produces styles.css with custom variables applied.
Modal opens and closes correctly when triggered.
import build is measurably smaller (document % difference).
write-up : Document commands run, key files, and a short analysis of why imports reduced size (unused plugin code excluded).
10. common issues
Tooltips/popovers not working: Did you load Popper? Use the bootstrap.bundle or ensure Popper is included/imported.
SCSS build errors: Check order of imports; variable overrides must come before importing bootstrap main file. If using the new Sass module system (@use), be aware of namespacing differences.
Large bundle: Import only the JS plugins you need from bootstrap/js/dist/ instead of importing entire package.
Assets not found in production: Don’t rely on node_modules paths in production — copy or bundle assets into public/ or let your bundler include them.
11. Research
Suggested:
Internals of Bootstrap’s JS modularization and how tree-shaking works with modern bundlers.
Best for theming large apps with Bootstrap and variable scope management.
Accessibility implications of Bootstrap components (modals, alerts, accordions).
Comparison of build outputs across bundlers (Webpack vs Vite vs Rollup) when using Bootstrap.
Migration notes and history (removal of jQuery in v5, Popper integration).
research
Profile bundle size with and without JS imports (use source-map-explorer or rollup-plugin-visualizer).
Explore the bootstrap/scss partials to create a minimal CSS build that contains only utilities and components you need.
No comments:
Post a Comment