title: Best way to loop the angular 4 with bootstrap columns?
body: <p>I want to loop my list in bootstrap columns. </p>
  
  <ol>
  <li>In the first row, I would like to show three columns</li>
  <li>In the second row, I would like to show two columns</li>
  <li>In the third row, I would like to show only one column</li>
  </ol>
  
  <p>The code is below.</p>
  
  <pre><code>&lt;div *ngFor="let watch of List;let i = index;" &gt;  
      &lt;div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
           style="text-align:center; background-color:rgb(0, 183, 255);"&gt;{{watch.name}}
      &lt;/div&gt;
      &lt;div&gt;{{watch.value}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It is displaying each column in a single row. Not showing like three, two and one.</p>