Turns out I have the following problem with cards-columns from bootstrap 4
my code is the following:
<div class="container m-5">
<div class="card-columns m-5 animated fadeIn mx-auto">
<div class="card puntero" *ngFor="let item of items" (click) = "verArtista(item)">
<img src="{{item.images | noimage}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ item.name }}</h5>
<p class="card-text">
<span class="badge badge-pill badge-primary" *ngFor="let artista of item.artists">{{artista.name}}</span>
</p>
</div>
</div>
</div>
</div>
This code is contained in the container class so the cards end up aligned to the left similar to the following example
I have tried a few settings but none seem to work.
Friend, since you use a container, your Cards do not occupy 100% of that container. I recommend you use a row and then apply the size to the cards, respecting the 12-column system used by the bootstrap grid. Starting from there, I leave you an example where I use three cards inside a row ( row ) which in turn is inside a container, at first they should appear just like your example, but using flex we can align them to the center vertically with justify-content-center we apply this class in the div that contains the class row because the behavior of this applies to the children of the contain parent.