Bootstrap 4 does not place columns side by side in Angular8

Question

Good afternoon, you guys. I don’t know what’s going on with Bootstrap in a project that I’m doing that it doesn’t put the columns side by side. I tried to change the size, I tried to remove the Rows and it doesn’t work. These cols are generated inside an ngFor, and even if I take them out, they don’t stand side by side at all. Does anyone have any idea what’s going on?

container.component.html

<div class="container">
<app-logo></app-logo>
<div class="row">
    <div class="col-md-12">
        <router-outlet></router-outlet>
    </div>
</div>
</div>

catalogo.component.html

<div class="row" *ngFor="let item of produto">
<div class="col-6 col-sm-6 col-md-6 col-xl-6">
    <p>{{item.name}}</p>
    <!-- <p>{{item.images[0].url}}</p> -->
</div>
</div>

Answer 1

Your loop is creating new rows so it is not aligning side by side. You should loop in the div with the column classes. Follows the amendment:

<div class="row">
  <div *ngFor="let item of produto"
        class="col-6 col-sm-6 col-md-6 col-xl-6">
    <p>{{item.name}}</p>
  </div>
</div>