'How to integrate Bootstrap into an angular CLI project

I'm relatively new to integrating bootstrap into angular and I started by running the npm i --save bootstrap@3 command which downloaded the required files into the node_modules folder of my angular project.

However, when I went to the angular.json file to input the relative path into the "styles" section, I got the following error:

 "styles": [
              "src/node_modules/boostrap/dist/css"
            ],

ERROR in multi ./src/node_modules/boostrap/dist/css Module not found: Error: Can't resolve 'C:\Users\User\Desktop\ShoppingOnline\client\yoavonlineshop\src\node_modules\boostrap\dist\css' in 'C:\Users\User\Desktop\ShoppingOnline\client\yoavonlineshop'

I made sure to use backslash. The angular node modules folder is outside the src folder. Do I need to go up one tier? ../? The output path is:

"outputPath": "dist/YoavOnlineShop",

edit: Thank you guys, it doesn't produce an error now. However, the styles of bootstrap aren't being applied. Do I need to add anything into the app.module or the specific components?

Before integrating bootstrap like above, I used CDN and it worked fine but now I think I broke it.

angular angular-ui-bootstrap

Solution 1:^[1]

Try this:

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

It is outside the src folder but inside the angular project, so you can access it as shown above.

Check this guy here if you want to load a specific version locally and on how to use it.

Solution 2:^[2]

to install bootstrap jquery popper.js and font-awesome we need to tape this request

npm install bootstrap jquery popper.js and font-awesome

and in angular.json we put the relative path of all our elements

"root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/salam-angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
        

"styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/popper.min.js"
            ]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Athanasios Kataras
Solution 2	SOUF IANE

'How to integrate Bootstrap into an angular CLI project

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]