Bootstrap not working properly in Angular 6

24

votes

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:

cssangularbootstrap-4angular6

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

I think this solution will work: stackoverflow.com/questions/51870386/… - Kinjal Vithalani

@ATT : after updating angular.json script file, you will probably need to run npm install or build your app again. - HDJEMAI

@HDJEMAI Qeustion is updated - ATT

@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

46

votes

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)

19

votes

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"
                    ],

9

votes

dear friend iam studying same angular6 tutorial. I also faced same situation.finally I have solved this First uninstall bootstrap. 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"

your application will defenitely work exactly same as that in that video tutorial of udemy

6

votes

I had the same issue. Below helped for me.

Stop the server and recompile using ng serve

4

votes

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).

2

votes

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

2

votes

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>

1

votes

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"
],

1

votes

I did exactly same thing as listed in above answers but still faced the same problem. In my case I was referring to wrong popper.js path in angular.json

"node_modules/popper.js/dist/js/popper.js",

instead of

"node_modules/popper.js/dist/umd/js/popper.js",

1

votes

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>

0

votes

The above method is fine but sometimes it works sometimes it not, even if your are doing everything right. I personally prefer to download css/js manually and keep them in assets folder and provide there link in index.html. If anything goes wrong then browser console will tell you the problem,whereas in conventional approch,browser console doesn't provide any info/error.

0

votes

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.

0

votes

Tired alot of things but this is what worked for me today:

package.json

  "dependencies": {
    "@angular/animations": "~8.2.5",
    "@angular/common": "~8.2.5",
    "@angular/compiler": "~8.2.5",
    "@angular/core": "~8.2.5",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.5",
    "@angular/platform-browser": "~8.2.5",
    "@angular/platform-browser-dynamic": "~8.2.5",
    "@angular/router": "~8.2.5",
    "bootstrap": "^4.3.1",
    "bootstrap-sass": "^3.3.7",
    "firebase": "^6.6.0",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

angular.json

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

0

votes

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

0

votes

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

0

votes

i was facing same issue and i was also following same course from udemy adding "nav-expand-lg " class in outer nav tag resolved my issue. my angular.json file also same as answered by @HDJEMAI

<nav class="navbar nav-expand-lg 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>

0

votes

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

0

votes

I also faced this exact same issue. After a lot of trial and error, I finally figured the issue was with using bootstrap 3 syntax with bootstrap 4 library. Check your bootstrap version in package.json and then identify the bootstrap syntax. Update this <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> and your code should work.

0

votes

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

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

Thanks

0

votes

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.

0

votes

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

-3

votes

An alternative and easier approach for adding bootstrap would be to put a CDN link in the head section of index.html (no need to install bootstrap via npm in this case):

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

This will work!!

Bootstrap not working properly in Angular 6

22 Answers