NPM (Node Package Manager) is the default package manager for the NodeJS JavaScript runtime environment. It allows developers to easily manage project dependencies, share and reuse code, and automate various development tasks. npm is also used for installing, publishing, and managing third-party packages and modules, making it a crucial tool in the NodeJS ecosystem. npm provides a vast ecosystem of packages, enabling developers to leverage existing code and libraries to build applications more efficiently. npm is free to use and helps save developers time by not having to write everything from scratch.
Prerequisites:
Steps to Install Bootstrap using NPM
Step 1: Create a new project or navigate to an existing project directory.
npm init -y
Project Structure:
project structure
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Step 3 : Now we are all set to install bootstrap in our application, we can now run the following command to directly install bootstrap.
npm install bootstrap
This command installs the latest version of bootstrap to our project.
We can also see that our folder structure got updated with required node modules folder which contains bootstrap , along with package.json and package-lock.json
The Updated package.json file is:
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.3"
}
}In our package.json file, we can clearly see that bootstrap has been added along with the version in the dependencies.
Example: Below is an example of npm bootstrap.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include Bootstrap CSS -->
<link
rel="stylesheet"
href="node_modules/bootstrap/dist/css/bootstrap.min.css"
/>
</head>
<body>
<div class="container-fluid">
<div>
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Bootstrap classes</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-3" style="background: antiquewhite">Column 1</div>
<div class="col-md-6" style="background: aquamarine">Column 2</div>
<div class="col-md-3" style="background: burlywood">Column 3</div>
</div>
</div>
</div>
</body>
</html>
Output:
Here, in the above example, the Bootstrap CSS file , which is created by npm install in the node modules, is included via a <link> tag. We have used different bootstrap classes to create a responsive and visually appealing layout easily by using different column classes .