Step-by-Step Guide to Installing Bootstrap via Package Manager

In this step-by-step guide, we'll walk you through the process of installing Bootstrap using npm, you can follow these steps:

Step 1: Choose a Package Manager

Make sure you have Node.js and npm installed on your system. If you don't have them installed, you can download and install them from the official Node.js website: Node.js Downloads.

You can read this post Node.js for Windows: Quick and Easy Installation Steps

Step 2: Create a Project

Open your terminal or command prompt and navigate to your project directory using the cd command. Run this command npm init -y to initialize a new npm project.

For example i create Boostrappackage project directory in my Drive E.

This command generates a default package.json file, for managing your project's dependencies.

Step 3: Install Bootstrap

Run npm install bootstrap command in your command prompt to install Bootstrap using npm:

That command will creating node_modules directory, where the dependencies specified in your project's package.json file are stored.

Step 4: Include Bootstrap in Project

After the installation is complete, you need to link Bootstrap in your HTML files.

Create new HTML file in your directory project and name it index.html.

Include the Bootstrap CSS file in the <head> section, and you can add Navbars components after the <body> tag.

<!doctype html>
<html lang="en">
  <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">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" aria-disabled="true">Disabled</a>
            </li>
          </ul>
          <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="container my-5">
      <h1>Hello, world!</h1>
    </div>
  </body>
</html>

Step 5: Run Your Project

Run your project use a development server or simply open your HTML file in a web browser.

In this example i am using npx http-server.

Open your project in a browser, and you should see Bootstrap styles applied to your HTML.

You have successfully installed Bootstrap using npm and integrated it into your project.

Syntaxlogy.com

Syntaxlogy.com