How can I remove Bootstrap from my Angular project?

Question

I am attempting to use Material Design Bootstrap (MDB) in my Angular project. However, when I use an angular bootstrap component, it seems standard bootstrap interferes with the styling.

Whats the best way to fully remove bootstrap from my angular project so my components are only styled by angular bootstrap?

Edit

angular.json

"styles": [
              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
              "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
              "src/styles.scss"
            ],

package.json,

"dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@fortawesome/fontawesome-free": "^5.8.2",
    "@types/chart.js": "^2.7.52",
    "angular-bootstrap-md": "^7.5.2",
    "atom": "^1.1.0",
    "chart.js": "^2.5.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "rxjs": "~6.3.3",
    "terminal": "^0.1.4",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

Solution 1

First : Remove bootstrap dependency From your package.jsonas shown below for example:

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "bootstrap": "^3.3.1",   <-------REMOVE THIS
    "core-js": "^2.5.4",
    "rxjs": "6.0.0",
    "zone.js": "^0.8.26"
  },

Second : Remove the bootstrap url from angular.json, if you have placed it under styles section like as shown below

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css" <--- REMOVE THIS
],

Third : Check and Remove any bootstrap references explicitly imported in styles.css or any other files remotely or locally like as shown below

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

Solution 2

npm uninstall bootstrap --no-save

also remove the reference you added in angular.json under styles which points bootstrap.min.css

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

Comments

[Ethernetz]

Thanks, I was importing it in styles.css as well.

[vigamage]

In addition to this, I removed bootstrap entry from package-lock.json too