How to integrate Bootstrap into an angular CLI project

Question

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.

Hameed Syed · Accepted Answer · 2019-12-26 08:24:32Z

2

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.

edited Dec 26, 2019 at 8:24

answered Dec 26, 2019 at 8:21

Hameed Syed

4,3532 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Athanasios Kataras · Accepted Answer · 2019-12-26 08:21:26Z

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.

answered Dec 26, 2019 at 8:21

Athanasios Kataras

26.7k6 gold badges40 silver badges67 bronze badges

Comments

SOUF IANE · Accepted Answer · 2022-02-08 13:40:13Z

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"
            ]

Collectives™ on Stack Overflow

How to integrate Bootstrap into an angular CLI project

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related