17. Installing and Using Bootstrap and jQuery

Step 1: Install Bootstrap and jQuery

1. Install Bootstrap
   To install the latest version of Bootstrap, run:

   npm install bootstrap

   If you want to install a specific version of Bootstrap, like version 3.3.7, use:

   npm install bootstrap@3.3.7

2. Install jQuery
   To install jQuery, run:

   npm install jquery

---

Step 2: Check if Bootstrap and jQuery are Installed

After running the above commands, you can check if Bootstrap and jQuery are listed in your package.json file under dependencies:

"dependencies": {
  "bootstrap": "^5.0.0", // or the version you installed
  "jquery": "^3.6.0"     // or the version you installed
}

---

Step 3: Register Bootstrap and jQuery in angular.json

To use Bootstrap and jQuery in your Angular project, you need to register them in the angular.json file under the styles and scripts arrays.

1. Add Bootstrap CSS to angular.json
   In the angular.json file, add the Bootstrap CSS file to the styles array:

   "styles": [
     "src/styles.css",
     "node_modules/bootstrap/dist/css/bootstrap.min.css"
   ]

2. Add jQuery and Bootstrap JS to angular.json
   In the scripts array, add jQuery and Bootstrap JS (if you’re using Bootstrap JavaScript components):

   "scripts": [
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ]

This ensures that Bootstrap and jQuery are included in your project, and you can use their styles and functionality.

---

Final angular.json Example

Here’s an example of how the relevant parts of your angular.json might look after adding Bootstrap and jQuery:

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.css",
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
          "scripts": [
            "node_modules/jquery/dist/jquery.min.js",
            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
          ]
        }
      }
    }
  }
}

---

Key Points:

• npm install bootstrap installs the Bootstrap CSS and JavaScript files.
• npm install jquery installs the jQuery library.
• You need to add both Bootstrap CSS and JavaScript (along with jQuery) to the angular.json file to use them globally in your Angular application.