Bootstrap not working properly in Angular 6

Question

I started learning Angular and I'm following a tutorial. I tried putting the code as in the tutorial for the navigation-bar:

<nav class="navbar navbar-default">
  <div class="container-fluid">
     <div class="navbar-header">
         <a href="#" class="navbar-brand">Recipe book</a>
     </div>
     <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
             <li> <a href="#">Recipe</a></li>
             <li> <a href="#">Shopping list</a></li>
         </ul>
         <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                  <ul class="dropdown-menu">
                      <li><a href="#">Save data </a></li>
                      <li><a href="#">Fetch data </a></li>
                  </ul>
              </li>
         </ul>
     </div>
  </div>
</nav>

But all I get is this:

If I remove bootstrap, I do get the other items.

I used npm install bootstrap --save and @import "~bootstrap/dist/css/bootstrap.css"; in styles.css to use bootstrap.

EDIT:

I did not wanted to open a question with two problem, but after looking at the answers so far ill describe another problem I had:

I also installed Jquery using nmp install jquery --save and added to angular.json:

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

In this case, after removing @import "~bootstrap/dist/css/bootstrap.css"; from styles.css`, bootstrap is not working at all. The only way i got bootstrap to work is as i described in the question.

EDIT 2:

I started a new project and followed @HDJEMAI s answer instructions. I now still get the same page as in the picture but its now working through the rows added to styles and scripts in angular.json and not through the @import "~bootstrap/dist/css/bootstrap.css" in the styles.css file . But the problem is still that is not the same as in the tutorial even though the code is the same.

This is what he gets in the tutorial:

From looking at the screenshot, it actually appears to be working as expected. You may want to add the `bg-light` class possibly, but I guess it depends on what you were expecting it to look like — user184994, Oct 06 '18 at 07:01
I think this solution will work: https://stackoverflow.com/questions/51870386/bootstrap-not-working-in-angular-6-app — Kinjal, Oct 06 '18 at 07:06
@ATT : after updating angular.json script file, you will probably need to run npm install or build your app again. — HDJEMAI, Oct 06 '18 at 07:55
@ATT: I'm using that configuration in my answer **in a real working project**, that answer is good. For your specific project, you have to add any additional dependency you need. or create a real example as close as possible to your app using stackblitz, that I can look at or someone else can take a look at what remaining problem you have. So, consider at least to accept the answer if you where able to get bootstrap to work without importing manually the required files. This way it will help other people with the same kind of issue. — HDJEMAI, Oct 06 '18 at 16:53
You can fix the problem in the Angular.json file like [fix bootstrap in angular.json](https://stackoverflow.com/a/55806954/7487135) — Iman Bahrampour, Apr 23 '19 at 10:17

HDJEMAI · Accepted Answer · 2020-11-01T10:40:24.517

You have to install both bootstrap and JQuery:

npm install bootstrap jquery --save

Then you will find these files in your node module folder:

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

Then you have to update your angular.json file:

In the architect, build section, or even test section if you want to see Bootstrap working as well when testing your application.

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

If you do not add the jquery.min.js script Bootstrap will not work.

Another requirement is popper.js if you need Bootstrap dropdown then you will need to install it and add the script file as well

npm install popper.js

Then add this script as well

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

Bootstrap dropdown require Popper.js (https://popper.js.org)

Tried your way HDJEMAI, it worked, but I had to restart the app. In case I make changes to the css file, it got reflected immidiately, but when I made changes in the angular.json, I had to restart the app (Ctrl+C and then ng serve) — User M, Mar 03 '20 at 19:18
I've mannually removed the modules from node_modules and reinstalled the modules. It worked for me. I've provided the solution in this post below. — shalamus, Feb 20 '22 at 22:40

score 33 · Answer 2 · answered Feb 18 '20 at 20:00

33

If you are adding the bootstrap path into the angular.json file, make sure it is the styles within the project\architect\build. Not the one in the project\architect\test.

{
"projects": {
        "architect": {
            "build": {
                    "styles": [
                        "node_modules/bootstrap/dist/bootstrap.min.css",
                         "src/styles.css"
                    ],
            "test": {
                    "styles": [
                         "src/styles.css"
                    ],

answered Feb 18 '20 at 20:00

Mann Wong

331
3
4

Yep, but just for information, I've already used that in _**project\architect\test**_ as well, because sometimes you will need - _**for advanced debugging**_ - to find CSS elements for ag-grid component, to be able to do unit test or e2e tests, so in debug mode with chrome, you will have access to the real UI, and then you can grab easily some elements. – HDJEMAI May 09 '20 at 10:54
3

I am only upvoting this as I have found out the changes I have made was in test.It is easy to overlook and it saved me time.Thanks. – prajitgandhi Oct 13 '20 at 22:59
This should be the approved ans, this will be helpful for beginners :) Thank you. – Gururaj Aug 02 '23 at 17:26

score 12 · Answer 3 · edited Aug 31 '22 at 18:34

12

First uninstall bootstrap. The next step is to install bootstrap by following command

npm install --save bootstrap@3 A

next go to styles.css and paste

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

edited Aug 31 '22 at 18:34

miken32

42,008
16
111
154

answered Nov 14 '18 at 13:37

baiju krishnan

231
4
14

1

@baiju krishnan: Bootstrap requires JQuery. Please read the documentation here: https://getbootstrap.com/docs/4.3/getting-started/introduction/. Here is a small part from there: Many of our components require the use of JavaScript to function. **Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. ...** – HDJEMAI Nov 15 '19 at 01:28
I also started working on learning angular and your solution worked.Why do we need to copy the @import statement when it should work by adding in the angular.json file. Response from HDJEMAI is what I feel is good enough, but not sure why that didn't work and this did. – User M Mar 03 '20 at 06:28
@baiju Krishnan : thanks for your answer . used "../node_modules/bootstrap/dist/css/bootstrap.css" and it works for me – Jks Dec 04 '20 at 16:06

score 10 · Answer 4 · answered Jul 11 '19 at 20:20

As I see, if you are following "Maximilian Schwarzmüller" course in UDEMY, make sure you have installed Bootstrap 3, not anything else. Use these commands in your project folder (the uninstall only if other version are installed).

npm uninstall --save bootstrap
npm install --save bootstrap@3

This will install it locally to your project.

I had Bootstrap4 installed (thinking the course would still work with 4 instead of 3) and using Bootstrap3 instead worked in this same project as your in the course (without popper and jQuery).

Any idea, what is missing in bootstrap 4 – MR AND Apr 10 '20 at 17:11 — MR AND, Apr 10 '20 at 17:11

score 9 · Answer 5 · answered May 11 '19 at 15:33

9

I had the same issue. Below helped for me.

Stop the server and recompile using ng serve

answered May 11 '19 at 15:33

Utkarsh Bhushan

163
2
7

2

I agree that after restarting the server with Ctrl+C / ng serve I was able to run bootstrap without the need to add this line: ```@import '~bootstrap/dist/css/bootstrap.min.css';``` – Yassir Khaldi Jan 06 '20 at 09:48

score 4 · Answer 6 · answered Feb 20 '22 at 22:37

I've had a similar issue after installing bootstrap popper.js jquery I've manually removed bootstrap popper.js jquery folders from node_modules then I've done the following:

npm i bootstrap@latest jquery popper.js --save

going back to angular.json I've made sure I've included the following scripts under projects > architect > build :


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

],
"scripts": [
            "./node_modules/jquery/dist/jquery.min.js",
            "./node_modules/bootstrap/dist/js/bootstrap.min.js",
            "./node_modules/popper.js/dist/popper.min.js"
],

It solved the problem for me.

score 3 · Answer 7 · edited Aug 26 '21 at 13:28

3

On my end, I've solved this issue by adding the following into "style.css" file and it worked.

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

edited Aug 26 '21 at 13:28

Pelicer

1,348
4
23
54

answered Aug 24 '21 at 21:39

Gabjava

33
4

score 2 · Answer 8 · answered Oct 06 '18 at 06:58

Add your angular.json

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "xtreme-admin-angular": {
            "root": "",
            "sourceRoot": "src",
            "projectType": "application",
            "prefix": "app",
            "schematics": {},
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/xtreme-admin-angular",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "node_modules/bootstrap/dist/bootstrap.min.css"
                             //Your root depend this path
                        ]

And rerun your project

This worked best for me. My only difference is that I left included my styles.css file in the styles array. — SauerTrout, Apr 11 '20 at 02:09

score 2 · Answer 9 · answered Sep 15 '19 at 20:02

I think it is because of the problem with bootstrap, try this:

Step 1. Inside .angular-cli.json file

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

Remove "../node_modules/bootstrap/dist/css/bootstrap.min.css"

Step 2. Go to styles.css

Import bootstrap by adding this line

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

These steps solved the errors I got during the building process.

score 2 · Answer 10 · answered Nov 13 '19 at 05:57

2

Add this 3 links in your index.html file. You don't have to install bootstrap or jquery or update your angular.json file. Works as a charm.

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

answered Nov 13 '19 at 05:57

Salman Arefin

173
2
9

1

This is just a quick fix, it doesn't follow the proper placement of things in Angular framework. – Carmela May 09 '20 at 06:05

score 2 · Answer 11 · edited May 08 '20 at 22:17

2

Had same issues with bootstrap items using VS code editor. I tried ng build before ng serve and bootstrap items worked fine.

edited May 08 '20 at 22:17

zatamine

3,458
3
25
33

answered May 08 '20 at 19:24

SKS

21
1

score 1 · Answer 12 · edited Mar 15 '19 at 08:03

install npm install bootstrap@latest jquery --save
install npm install popper.js;

then go to Angular.json file (line no 47) change lines with this:

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

score 1 · Answer 13 · edited Aug 28 '19 at 18:57

1

After installation of bootstrap and adding it to angular.json file.

If bootstrap doesn't render, just change the port of development URL:

ng serve --port <your choice of port>

edited Aug 28 '19 at 18:57

Mehdi Yeganeh

2,019
2
24
42

answered Aug 28 '19 at 18:13

Charles

11
1

score 1 · Answer 14 · answered Nov 03 '20 at 01:28

1

I’d start by checking both “styles” and “scripts” under “build” and “test” sections

answered Nov 03 '20 at 01:28

Mark Tsizis

266
1
5
8

score 1 · Answer 15 · edited May 04 '21 at 21:49

1

Add this line in style.css and its gonna work.

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

Thanks

edited May 04 '21 at 21:49

Kevin M. Mansour

2,915
6
18
35

answered May 04 '21 at 09:19

Shivam Patel

11
1

score 1 · Answer 16 · answered Jul 15 '21 at 05:01

For me I had to do both, copy the node_modules jquery and bootstrap js files in angular.json

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

And copy @import "~bootstrap/dist/css/bootstrap.css"; in styles.css

score 1 · Answer 17 · answered Apr 04 '22 at 07:35

I have also created a project following the video. This works for me npm uninstall --save bootstrap npm install --save bootstrap@3

then in style array added like this

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

score 0 · Answer 18 · answered May 18 '21 at 09:35

Please check all your .component.ts files, especially recipe.component.ts. Maybe there is CSS encapsulation tuning like

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})

If it is so. You should remove encapsulation property.

score 0 · Answer 19 · answered Nov 25 '22 at 03:15

I had the same problem when using bootstrap in an Angular project. I correctly installed it and updated the angular.json file, but I forgot to import it into the global style sheet (styles.css). As a result, I included it in the global stylesheet. So, if your installation is correct and your angular.json is up to date, please try importing it in the global style sheet (styles.css) as shown below:

@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

I'm hoping it works because it did for me when I had the same problem.

score 0 · Answer 20 · answered Apr 30 '23 at 16:10

0

Make sure you added the css path under your architect -> build -> Styles section in angular.json file

answered Apr 30 '23 at 16:10

Bhuvanesh Narayanasamy

301
1
3
9

score -1 · Answer 21 · answered Oct 29 '19 at 14:39

I check many way

"../"... or "./"... or / also I don't want to use in "style.css" because maybe want add some "js" files or "css" files that depend on "js" file to this reason the best way was

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

BUT restart your PC not only browser or IDE

Bootstrap not working properly in Angular 6

21 Answers21

Linked