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';
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"
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With