title: Bootstrap carousel uses two rows when slide changes
body: <p>I have a problem with a over a year old website. At the beginnning of this year I made few modifications and at the same time did npm install, because for some reason all the packages were not found when starting angular (version 5, same problem now with 9). After the npm install I had several issues, most annoying one with carousel. For some reason, when sliding, the carousel slides the next slide from a "row" below and then lifts the slide to its proper place. This effect looks completely stupid and I had no problems with this before. The bootstrap version has not changed from 4.3.1, although I tried 4.4.1 as well.</p>
  
  <p>The code:</p>
  
  <pre><code>&lt;div class="event-slider"&gt;
      &lt;div id="carouselEvents" *ngIf="events &amp;&amp; events.length &gt; 0" class="carousel slide" data-ride="carousel"&gt;
          &lt;div *ngIf="events" class="carousel-inner"&gt;
              &lt;div *ngFor="let event of events; first as isFirst" class="carousel-item" [class.active]="isFirst"&gt;
                  &lt;span class="one-line"&gt;&lt;i&gt;Tuleva tapahtuma:&lt;/i&gt;&lt;/span&gt;
                  &lt;!--&lt;div class="one-line" [fittext]="true" [activateOnResize]="true" [maxFontSize]="30"&gt;&lt;b&gt;{{event.name}}&lt;/b&gt;&lt;/div&gt;--&gt;
                  &lt;span class="one-line"&gt;{{event.startDateTime | date: 'dd.MM.yyyy HH:mm'}}&lt;/span&gt;
                  &lt;div class="one-line"&gt;
                      &lt;a *ngIf="authService.loggedIn()" routerLink="/events/{{event.id}}"&gt;Lue lisää&lt;/a&gt;
                      &lt;a *ngIf="!authService.loggedIn()" routerLink="/events"&gt;Kaikki tapahtumat&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;        
              &lt;a class="carousel-control-prev" href="#carouselEvents" role="button" data-slide="prev"&gt;
              &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" href="#carouselEvents" role="button" data-slide="next"&gt;
              &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
              &lt;span class="sr-only"&gt;Next&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any ideas? A photo describing the problem attached.</p>
  
  <p><a href="https://i.stack.imgur.com/SpQet.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SpQet.jpg" alt="carousel_problem"></a></p>