title: Angular virtual scroll with bootstrap responsive design
body: <p>How would I set up Angular virtual scroll with bootstraps responsive design?</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 col-6" *ngFor="let item of items; let i = index"&gt;
          &lt;img src="{{item.url}}"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So basically image are loaded horizontally next to each other and wrap down the viewport and resizing the viewport will change the size of columns.</p>
  
  <p>I found ngx-virtual-scroller (<a href="https://github.com/rintoj/ngx-virtual-scroller/issues/321" rel="nofollow noreferrer">https://github.com/rintoj/ngx-virtual-scroller/issues/321</a>) and also cdk scrolling (<a href="https://material.angular.io/cdk/scrolling/overview" rel="nofollow noreferrer">https://material.angular.io/cdk/scrolling/overview</a>) but it seems they require each item to be on a single row.</p>