Angular *ngFor loop in bootstrap 5 grid columns not right

Question

I am using Angular 13 and Bootstrap 5 and trying the do a loop where I get 2 columns on a grid.

the data is an array:

items = [1, 2, 3 ,4];

Then I have this:

<div class="container" *ngFor="let item of items">
    <div class="row">
      <div class="col-md-6">

        <div class="card">
            <div class="card-header">
              Heading here
            </div>
            <div class="card-body">
             Body here
            </div>
          </div>

      </div>
    </div>
  </div>

For some reason I'm getting the 4 cards in only 1 column instead of 2 columns ... so it's giving me 4 items in one column and I need 2 rows with 2 items in each row.

How can I do this?

score 1 · Accepted Answer · answered Jan 12 '22 at 16:41

You're looping over on the container, move the ngFor to your col-md-6:

<div class="container">
    <div class="row">
      <div class="col-md-6" *ngFor="let item of items">

        <div class="card">
            <div class="card-header">
              Heading here
            </div>
            <div class="card-body">
             Body here
            </div>
          </div>

      </div>
    </div>
  </div>

Angular *ngFor loop in bootstrap 5 grid columns not right

1 Answers1