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.

Solution

change the path like this

 "styles": [
                  "src/styles.css",
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  "node_modules/font-awesome/css/font-awesome.css",
                  "node_modules/toastr/build/toastr.min.css"
                ],

why node_modules/bootstrap not src/node_modules/bootstrap because the angular path from current angular.json file is nodue_models which CLI will take care. And remember dist path formation and minimization is also taken care by cli not your code explicitly.