Angular *ngFor loop in bootstrap 5 grid columns not right-CodePudding

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  *ngFor="let item of items">
    <div >
      <div >

        <div >
            <div >
              Heading here
            </div>
            <div >
             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?

CodePudding user response：

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

<div >
    <div >
      <div  *ngFor="let item of items">

        <div >
            <div >
              Heading here
            </div>
            <div >
             Body here
            </div>
          </div>

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