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?

Mathew Berg · Accepted Answer · 2022-01-12 16:41:05Z

1

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>

answered Jan 12, 2022 at 16:41

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular *ngFor loop in bootstrap 5 grid columns not right

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related