CODEWITHSUNDEEP
angulartwitter-bootstrap-3
user12050907
user12050907

Reputation:

Bootstrap version 3.4 not working in Angular 9

I have installed bootstrap version 3.4 using Angular cli. Below is the command I used npm install --save bootstrap@3 Then I have added 

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

In angular.json file. But I am unable to access the bootstrap default style class. No bootstrap file is showing in browser console whenever I run the application.

I am unable to find the issue here. Your help would be greatly appreciated. Adding screenshot of my node_modules folder node_modules

Upvotes: 0

Views: 2729

Answers (3)

Michael Norman
Michael Norman

Reputation: 106

Add

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

to src/styles file.

Upvotes: 9

Kurt Hamilton
Kurt Hamilton

Reputation: 13515

Your paths shouldn't start with a ./.

Instead, try the following:

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

This now makes them relative to the project root.

Working demo: https://stackblitz.com/edit/angular-etn2fd

Upvotes: 1

Passionate Coder
Passionate Coder

Reputation: 7294

Remove relative path use like below. As src is used directly just like that use node_modules not ./node_modules

"styles": [

              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],

A good resource link is

https://medium.com/@oyewusioyekunle/how-to-add-bootstrap-to-your-angular-project-angular-8-6379fd6a0f46

Upvotes: 1

Related Questions