title: Angular with bootstrap ngFor repeat row every 3 items
body: <p>Im trying to line up 3 mat-card items next to each other but for some reasons it just doesn't want to go in the right position. I followed the answers given in this thread ( <a href="https://stackoverflow.com/questions/27211799/angular-ng-repeat-add-bootstrap-row-every-3-or-4-cols">Angular ng-repeat add bootstrap row every 3 or 4 cols</a> ).</p>
  <p>The code:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div *ngFor='let session of sessions' ng-if=&quot;$index % 3 == 0&quot; class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-4 col-lg-4&quot;&gt;
      &lt;mat-card class=&quot;example-card&quot;&gt;
  
        &lt;mat-card-header&gt;
          &lt;mat-card-title class=&quot;title&quot;&gt;{{session.session_name}}&lt;/mat-card-title&gt;
          &lt;mat-card-subtitle&gt;{{session.speakers[0].name}}&lt;/mat-card-subtitle&gt;
        &lt;/mat-card-header&gt;
  
  
        &lt;mat-chip color=&quot;accent&quot; class=&quot;pull-right&quot; selected&gt;{{session.level}}&lt;/mat-chip&gt;
  
        &lt;img mat-card-image height=&quot;150px&quot; [src]=&quot;session.sessionImgUrl&quot; alt=&quot;Photo of a Shiba Inu&quot;&gt;
  
        &lt;mat-card-content&gt;
  
          &lt;mat-accordion class=&quot;accordion&quot;&gt;
            &lt;mat-expansion-panel hideToggle&gt;
              &lt;mat-expansion-panel-header&gt;
                &lt;mat-panel-title&gt;
                  Lees meer.
                &lt;/mat-panel-title&gt;
                &lt;mat-panel-description&gt;
  
                &lt;/mat-panel-description&gt;
              &lt;/mat-expansion-panel-header&gt;
              &lt;p&gt;{{session.speakers[0].name}}&lt;/p&gt;
              &lt;mat-chip-list aria-label=&quot;categories&quot;&gt;
                &lt;div *ngFor='let category of session.categories'&gt;
                  &lt;mat-chip color=&quot;secondary&quot;&gt;{{category}}&lt;/mat-chip&gt;
                &lt;/div&gt;
              &lt;/mat-chip-list&gt;
            &lt;/mat-expansion-panel&gt;
          &lt;/mat-accordion&gt;
        &lt;/mat-card-content&gt;
      &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>Screen of the result (where they should be next to each other):
  <a href="https://i.stack.imgur.com/Ef3Xb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ef3Xb.png" alt="enter image description here" /></a></p>