CODEWITHSUNDEEP
angularbootstrap-4
bitshift
bitshift

Reputation: 6852

Angular 6 with bootstrap 4.1 not loading

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

Upvotes: 5

Views: 9515

Answers (7)

Pradeep Kumar Das
Pradeep Kumar Das

Reputation: 891

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

Upvotes: 0

Gayatri Kulkarni
Gayatri Kulkarni

Reputation: 51

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

Upvotes: 1

p_escobr
p_escobr

Reputation: 41

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.

Upvotes: 0

Raj Kumar Mishra
Raj Kumar Mishra

Reputation: 59

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

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

Upvotes: 0

Ernest
Ernest

Reputation: 2209

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';

Upvotes: 4

Menna Ramadan
Menna Ramadan

Reputation: 485

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

Upvotes: 16

mahmoud nassih
mahmoud nassih

Reputation: 13

I propose to edit styles.css:

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

if better solution very simple and effective

Upvotes: 1

Related Questions