7

I added bootstrap css in angular-cli.json - styles. Not applying bootstrap styles to my project. I added in package.json and did npm install. How to resolve this?

angular-cli.json

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

package.json

 "dependencies": {
    "bootstrap": "^4.0.0-beta.2"
 }
1

7 Answers 7

26
  1. No need to update or reinstall your bootstrap just do below mentioned step it will work for you

  2. open angular-cli.json inside styles array and specifying the path of bootstrap like this:

    Angular-cli.json:

    "styles": [
        "./node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
    ],
    
  3. Open your style.css and paste this at the top:

    @import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")    
    
Sign up to request clarification or add additional context in comments.

3 Comments

If anybody is using angular 2+ then you will see the angular.json instead of angular-cli.json. Add the above styles and " run npm install bootstrap --save ". I have not imported any @import URL in styles.css but still, It worked for me. Don't forget to " re-run the ng serve"
This answer solves the issue replacing "../node_modules/bootstrap/dist/css/bootstrap.min.css" (which was the correct syntax up to Angular 5) with "./node_modules/bootstrap/dist/css/bootstrap.min.css" that is equivalent to "node_modules/bootstrap/dist/css/bootstrap.min.css" (which is the reccomended syntax starting from Angular 6). BUT the problem might be that you are writing such a line in the wrong "styles": [ .. ] array, since there are two of such arrays in angular.json, as @Goel points out here below
Thanks, I was missing the data in angular.json. I thought if I run "npm install bootstrap", it take care for that
7

In your style.css add following line of code on top and let us know.

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

Also check with following line too

@import url("./node_modules/bootstrap/dist/css/bootstrap.min.css")

Hope it will help.

2 Comments

Added. Remains same.
create a demo project on stackblitz.com and provide link so that I can help properly.
6

There is two styles declaration in angular.json file. One in Builder section and other one test's builder section. Make sure you are putting it in the right section.

"builder" : {
 .....
     "styles" : [                  // It should go here. Around line no. 27
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
 .....
},
"test": {              
 .....
     "styles" : [                  // Not here!
          "src/styles.css",
        ],
 .....
}

1 Comment

I was doing exactly the mistake this answer pointed out, thanks! Please, be aware that changes in angular.json aren't taken into accoun automatically as soon you save the file, as changes in your .ts or .html files do. After editing angular.json, if a ng serve is running you have to stop it by Ctrl+C and then run ng serve again.
4

I faced the same problem. I tried to find what was the problem but got no result. I installed bootstrap using

npm install --save bootstrap

which installed the latest bootstrap i.e. ver 4, so I deleted installed bootstrap from node_modules folder and updated dependency in packag.json file to earlier version

"bootstrap" : "^3.3.7"     

and ran

npm intstall

After specifying the path of bootstrap file in angular style array as

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

it worked fine.

Comments

4

Step by step:

  1. In terminal inside your app directory run:

    npm install --save bootstrap 
    
  2. Open angular.json and search for styles. At the beginning of the array paste the path to your bootstrap.min.css file

    Should look like this:

    "styles": [
              "../node_modules/bootstrap/dist/css/bootstrap.min.css",
              "styles.css"
            ],
    
  3. Open your style.css and paste this at the top:

    @import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")
    
  4. Restart your server

Comments

3

paste following line of code in .angular-cli.json under styles: []

"../node_modules/bootstrap/dist/css/bootstrap.css"

2 Comments

I added already this line. Still not reflecting bootstrap styles
Can you paste your cli code here with package.json code?
0

inside angular-cli.json in

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

2 Comments

I added already this line. Still not reflecting bootstrap styles
use bootstrap link before style.css may help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.