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"
},
First : Remove bootstrap dependency From your package.json
as 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';