Bootstrap version 3.4 not working in Angular 9

Question

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

Does this answer your question? [How to add bootstrap in angular 6 project?](https://stackoverflow.com/questions/50290197/how-to-add-bootstrap-in-angular-6-project) — Vikas, Feb 18 '20 at 06:37

score 9 · Accepted Answer · edited Apr 03 '20 at 00:05

9

Add

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

to src/styles file.

edited Apr 03 '20 at 00:05

Azametzin

5,223
12
28
46

answered Apr 02 '20 at 23:01

Michael Norman

106
2

Kurt Hamilton · Answer 2 · 2020-02-18T07:03:51.563

1

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

edited Feb 18 '20 at 07:03

answered Feb 18 '20 at 06:37

Kurt Hamilton

12,490
1
24
40

I have tried this also, that was not working either. – Feb 18 '20 at 06:43
Have you navigated to the mode_modules folder to make sure the file is there? – Kurt Hamilton Feb 18 '20 at 06:44
Yes I have checked that as well. – Feb 18 '20 at 06:48
Have you tried rebuilding the app after updating those paths? – Kurt Hamilton Feb 18 '20 at 06:55
Yes I did that. – Feb 18 '20 at 06:57
I've created a working demo here: https://stackblitz.com/edit/angular-etn2fd. Can you recreate the problem in a stackblitz? – Kurt Hamilton Feb 18 '20 at 07:06
Sorry here I am unable to reproduce as your bootstrap is working fine. But mine not working :( – Feb 18 '20 at 07:17
Can you add a screenshot to your question of the file in the bootstrap node_modules folder, including the path – Kurt Hamilton Feb 18 '20 at 07:24
When I import the bootstrap.min.css file in style.css, it started working. – Feb 18 '20 at 13:13

score 1 · Answer 3 · answered Feb 18 '20 at 06:38

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

Bootstrap version 3.4 not working in Angular 9

3 Answers3