title: How can I remove Bootstrap from my Angular project?
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/qWVpk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qWVpk.png" alt="enter image description here"></a></p>
  
  <p>Whats the best way to fully remove bootstrap from my angular project so my components are only styled by angular bootstrap? </p>
  
  <p><strong>Edit</strong></p>
  
  <p><em>angular.json</em></p>
  
  <pre><code>"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"
              ],
  </code></pre>
  
  <p><em>package.json</em>,</p>
  
  <pre><code>"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"
    },
  </code></pre>