NPM Bootstrap - Coding

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.

Screenshot-2024-05-05-080057

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:

NPM bootstrap example

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 .

Reffered: https://www.geeksforgeeks.org

Node.js

Related
How to Use Node.js for Backend Web Development in 2024?
NPM Version
Remove NPM - npm uninstall
How to Clear the NPM Cache on Linux, macOS, and Windows ?
NPM Typescript

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	17