How to Install Bootstrap with npm: Step-by-Step Guide

To install Bootstrap with npm, run npm install bootstrap in your project folder. This downloads Bootstrap files so you can import them in your CSS or JavaScript files.

Syntax

Use the following command in your terminal inside your project folder:

• npm install bootstrap: Installs the latest Bootstrap package.

This command adds Bootstrap to your node_modules folder and updates package.json with Bootstrap as a dependency.

bash

npm install bootstrap

Example

This example shows how to install Bootstrap and import its CSS in a JavaScript file for a web project using a bundler like Webpack or Vite.

bash

npm install bootstrap

// In your main JavaScript file (e.g., index.js):
import 'bootstrap/dist/css/bootstrap.min.css';

// Now you can use Bootstrap classes in your HTML files.

Output

Bootstrap CSS styles are applied to your web page, enabling Bootstrap's design and layout features.

Common Pitfalls

1. Running npm install bootstrap outside your project folder: Make sure you are in the correct folder where your package.json is located.

2. Forgetting to import Bootstrap CSS: Installing Bootstrap only downloads files; you must import the CSS in your JavaScript or HTML to see styles.

3. Not using a bundler or build tool: If you don't use tools like Webpack or Vite, you need to link Bootstrap CSS manually from node_modules or use CDN instead.

javascript

/* Wrong: No import after install */
// npm install bootstrap
// No import in JS or link in HTML

/* Right: Import Bootstrap CSS */
import 'bootstrap/dist/css/bootstrap.min.css';

Quick Reference

• Install Bootstrap: npm install bootstrap
• Import CSS: import 'bootstrap/dist/css/bootstrap.min.css';
• Use Bootstrap classes: Add Bootstrap class names in your HTML elements.
• Use with bundlers: Works best with Webpack, Vite, or similar tools.

Key Takeaways

Run npm install bootstrap inside your project folder to add Bootstrap.

Import Bootstrap CSS in your JavaScript file to apply styles.

Ensure you use a bundler or link CSS manually to see Bootstrap effects.

Check you are in the correct folder before installing.

Use Bootstrap classes in your HTML to style elements.