CODEWITHSUNDEEP
angulartypescripttwitter-bootstrap
tijn167
tijn167

Reputation: 597

Angular with bootstrap ngFor repeat row every 3 items

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 ( Angular ng-repeat add bootstrap row every 3 or 4 cols ).

The code:

<div class="container">
  <div *ngFor='let session of sessions' ng-if="$index % 3 == 0" class="row">
    <div class="col-md-4 col-lg-4">
    <mat-card class="example-card">

      <mat-card-header>
        <mat-card-title class="title">{{session.session_name}}</mat-card-title>
        <mat-card-subtitle>{{session.speakers[0].name}}</mat-card-subtitle>
      </mat-card-header>


      <mat-chip color="accent" class="pull-right" selected>{{session.level}}</mat-chip>

      <img mat-card-image height="150px" [src]="session.sessionImgUrl" alt="Photo of a Shiba Inu">

      <mat-card-content>

        <mat-accordion class="accordion">
          <mat-expansion-panel hideToggle>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Lees meer.
              </mat-panel-title>
              <mat-panel-description>

              </mat-panel-description>
            </mat-expansion-panel-header>
            <p>{{session.speakers[0].name}}</p>
            <mat-chip-list aria-label="categories">
              <div *ngFor='let category of session.categories'>
                <mat-chip color="secondary">{{category}}</mat-chip>
              </div>
            </mat-chip-list>
          </mat-expansion-panel>
        </mat-accordion>
      </mat-card-content>
    </mat-card>
  </div>
</div>

</div>

Screen of the result (where they should be next to each other): enter image description here

Upvotes: 1

Views: 475

Answers (1)

Sam
Sam

Reputation: 1851

Your ngFor is on the division with the row class, you want to move that to the div below where you define the col class. You also don't need the modulo operator because bootstrap will wrap onto a new line for you automatically.

<div class="row">
    <div *ngFor='let session of sessions' class="col-md-4 col-lg-4">

Upvotes: 2

Related Questions