Responsive Bootstrap 4 grid for Angular 2 ngFor

Question

I wonder if there's a way to render responsively elements created by *ngFor in Angular 2?

I use Bootstrap 4 grid system based on flex property. And I've got this code in my Angular2 app:

<div class="outlet container">
<div class="row itemsBlock">
   <div *ngFor="let item of items" class="itemRender">
        <img class="itemImage" src="{{item.image}}" />
        <span class=itemitle">{{item.title}}</span>
   </div>
</div>

What I want is to get my items rendered responsively, say

3 divs in the row on large and middle-sized displays

2 divs in the row on small ones

1 div in the row on x-small displays

Answer 1

You can't really relate that stuff with looping over items collection. You could take use xl, lg,md & sm class with col-size-number(like col-xs-12) class on same row. Bootstrap will take care about to applying a class over element based on screen resolution.

Markup

<div class="row itemsBlock">
   <div *ngFor="let item of items" class="col-md-4 col-sm-6 col-12">
        <img class="itemImage" src="{{item.image}}" />
        <span class=itemitle">{{item.title}}</span>
   </div>
</div>

Note: The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.