title: Angular: bootstrap carousel doesn't work when importing bootstrap.css from file
body: <p>I have a simple component named "image-slider". When I import bootstrap.css from the Internet like this
  <code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.css" /&gt;</code> carousel works fine. </p>
  
  <p>But when I delete this line and import bootstrap.css from local file in image-slider.html like this:</p>
  
  <pre><code>@Component({
  selector: 'app-image-slider',
  templateUrl: './image-slider.component.html',
  styleUrls: ['../../../node_modules/bootstrap/dist/css/bootstrap.min.css']
  })
  export class ImageSliderComponent implements OnInit { ... }
  </code></pre>
  
  <p>slider doesn't work and images appear one under another:</p>
  
  <p>The path to the file is correct. Bootstrap works fine because when I add simple bootstrap button <code>&lt;button type="button" class="btn btn-primary btn-sm"&gt;Small button&lt;/button&gt;</code> it displays properly. </p>
  
  <p>Why the carousel behaves in such a strange way?</p>
  
  <p>image-slider.component.html:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   
  
   
  
  &lt;div class="container-fluid"&gt;
        &lt;ngb-carousel *ngIf="images"&gt;
          &lt;ng-template ngbSlide&gt;
            &lt;img [src]="images[0]" alt="Random first slide"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;First slide label&lt;/h3&gt;
              &lt;p&gt;Nulla vitae elit libero, a pharetra augue mollis interdum.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/ng-template&gt;
          &lt;ng-template ngbSlide&gt;
            &lt;img [src]="images[1]" alt="Random second slide"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Second slide label&lt;/h3&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/ng-template&gt;
          &lt;ng-template ngbSlide&gt;
            &lt;img [src]="images[2]" alt="Random third slide"&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Third slide label&lt;/h3&gt;
              &lt;p&gt;Praesent commodo cursus magna, vel scelerisque nisl consectetur.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/ng-template&gt;
        &lt;/ngb-carousel&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  '</p>
  
  <p>package.json dependencies:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> "dependencies": {
      "@angular/animations": "^6.0.3",
      "@angular/cdk": "^6.4.0",
      "@angular/common": "^6.0.3",
      "@angular/compiler": "^6.0.3",
      "@angular/core": "^6.1.4",
      "@angular/forms": "^6.0.3",
      "@angular/http": "^6.0.3",
      "@angular/material": "^6.4.0",
      "@angular/platform-browser": "^6.0.3",
      "@angular/platform-browser-dynamic": "^6.1.4",
      "@angular/router": "^6.0.3",
      "@ng-bootstrap/ng-bootstrap": "^3.1.0",
      "angular-bootstrap-md": "^6.2.2",
      "bootstrap": "^4.1.3",
      "bootstrap-loader": "^3.0.1",
      "chart.js": "^2.7.2",
      "core-js": "^2.5.4",
      "exports-loader": "^0.7.0",
      "imports-loader": "^0.8.0",
      "ng-bootstrap": "^1.6.3",
      "ngx-bootstrap": "^3.0.1",
      "postcss-loader": "^3.0.0",
      "rxjs": "^6.0.0",
      "util.js": "^0.0.0",
      "zone.js": "^0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.6.8",
      "@angular/cli": "~6.0.8",
      "@angular/compiler-cli": "^6.0.3",
      "@angular/language-service": "^6.0.3",
      "@types/jasmine": "~2.8.6",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.2.1",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~1.7.1",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.0",
      "karma-jasmine": "~1.1.1",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.3.0",
      "ts-node": "~5.0.1",
      "tslint": "~5.9.1",
      "typescript": "~2.7.2"
    }</code></pre>
  </div>
  </div>
  </p>