Angular 6 with bootstrap 4.1 not loading

Question

I can not seem to get bootstrap to load via the angular.json file

similar to this issue, however, nothing bootstrap related will load. However, ng build and ng serve seems to not report any isssues. Its just that then I browse to the page, its obvious that nothing is being styled.
Bootstrap 4.1.1 Navbar not working with Angular 6

[ note ] Rolling back to [email protected] seems to work just fine

package.json

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper": "^1.0.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

angular.json "

styles": [
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "src/styles.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"
        ]

Menna Ramadan · Accepted Answer · 2018-08-28 08:19:46Z

16

I faced this problem before and the solution is to make @import '../node_modules/bootstrap/dist/css/bootstrap.css'; in style.css file at the top of any code. so bootstrap will load successfully

answered Aug 28, 2018 at 8:19

Menna Ramadan

4853 silver badges12 bronze badges

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

2 Comments

user9925311 Over a year ago

@Menna Ramadan, Do we need to import bootstrap.min.js as like css?

Menna Ramadan Over a year ago

@Sricharan yes I think so If you need bootstrap js file in you application.

Ernest · Accepted Answer · 2019-02-05 17:05:42Z

4

I just added it to an Angular 7 project and the steps were:

1- Installing bootstrap 4:

npm install bootstrap

2- Add the below import to the src\styles.css

@import '~bootstrap/dist/css/bootstrap.min.css';

answered Feb 5, 2019 at 17:05

Ernest

2,22926 silver badges20 bronze badges

2 Comments

busuu Over a year ago

This finally worked but why??? Why do i have to import it manually in the style.css, whats the usage of importing it in "styles" attribute in angular.json?

Ernest Over a year ago

Honestly I asked the same question to myself but it was the way I had it working that time :( so wanted to share to help someone else :).

mahmoud nassih · Accepted Answer · 2018-08-08 11:13:10Z

1

I propose to edit styles.css:

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

if better solution very simple and effective

answered Aug 8, 2018 at 11:13

mahmoud nassih

136 bronze badges

1 Comment

Parham Alvani Over a year ago

I think by this way (using a space after ~) you cause an error and bootstrap will not be loaded.

Gayatri Kulkarni · Accepted Answer · 2019-08-17 10:00:37Z

1

If bootstrap was updated/installed after rendering the app using 'ng serve', kill the process and recompile the app.

answered Aug 17, 2019 at 10:00

Gayatri Kulkarni

514 bronze badges

1 Comment

Jake Over a year ago

This should be the correct answer. After angular.json is changed to include scripts and styles, or otherwise, should kill and restart ng serve. I confirmed this by comparing the dist version in actual webserver (IIS) and confirmed that ng serve version is not updated even though the webserver version is updated.

Raj Kumar Mishra · Accepted Answer · 2019-04-07 04:58:46Z

0

Don't use @import '~bootstrap/dist/css/bootstrap.css'.

I have solve using below @import 'bootstrap/dist/css/bootstrap.css'; in styles.css

answered Apr 7, 2019 at 4:58

Raj Kumar Mishra

591 silver badge6 bronze badges

Comments

p_escobr · Accepted Answer · 2019-08-06 19:48:10Z

0

Importing bootstrap.css is totally unnecessary because it is duplication of process. I have solved it by removing bootstrap -Sometimes configurations could be for bootstrap 3 - then installing lastest version with npm install bootstrap solves my problem.

answered Aug 6, 2019 at 19:48

p_escobr

311 silver badge9 bronze badges

Comments

Pradeep Kumar Das · Accepted Answer · 2020-08-25 03:28:30Z

0

write @import '../node_modules/bootstrap/dist/css/bootstrap.css'; in style.css this will give you compile error after that write the old code as below to make it work

answered Aug 25, 2020 at 3:28

Pradeep Kumar Das

8919 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 6 with bootstrap 4.1 not loading

7 Answers 7

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

2 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related