1

I am trying to install bootstrap in my Angular project.

  1. I used npm install --save bootstrap to install bootstrap in my project
  2. After that I installed jquery
  3. Provided path for bootstrap

Below is the angular.json file:

"styles": [
          "../node_modules/boostrap/dist/css/bootstrap.css",
          "src/styles.css"
        ],
        "scripts": [
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

When I pass the above bootstrap path in style.css it works but I want to make it work by passing the path to angular.json.

style.css file@import "../node_modules/bootstrap/dist/css/bootstrap.css"

All the paths that I tried are mentioned below:

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

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

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

1
  • See that the bootstrap 5 needn't jquery, see SO Commented Oct 25, 2022 at 9:41

2 Answers 2

3

On my proyect I have it like this.

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

But keep in mind that if you don't stop the serve and run again ng serve, it will not show the change as the import is made at the begining of the ng serve process.

hope it works for you.

If you changed the angular.json from the location of the original configuration, let me know wo we can figure it out the correct path

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

1 Comment

It worked by re-running using ng-serve.
0

I had the same issue. after i update styles.css file with following code it worked.

@import "~bootstrap/dist/css/bootstrap.css";

then i remove that and used following code in angular.json

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

Then i re run ng serve as told here. It worked. thanks

Comments

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.