10

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.

enter image description here

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"
  },
Ethernetz
  • 906
  • 3
  • 16
  • 33

4 Answers4

24

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';
Nidhish Krishnan
  • 20,593
  • 6
  • 63
  • 76
9

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"
 ],
Shubham
  • 462
  • 2
  • 8
1

For me, I have the Angular project generated by Visual Studio. After remove all bootstrap references, I need to rebuild the angular project ng build in order for the project to work correctly. Just throw this one out in case some one needs it.

Hoang Minh
  • 1,066
  • 2
  • 21
  • 40
0

follow the answer 1 if you want to understand how angular and or you are a beginner to angular/front-end-development because doing things manually for the first time are very helpful for the future,

if you are not a beginner and want to save time then just paste npm uninstall bootstrap --no-save

my answer is for all the angular developers

Asim Khan
  • 31
  • 5
  • This is already given by the accepted answer and here https://stackoverflow.com/a/56147263/5468463. SO is not a forum, we do not discuss and each answer needs to be useful – Vega Jul 14 '22 at 16:57