I'm trying to use the card group functionality of Bootstrap 4 with Angular ngFor.
Here is the HTML I have for now, but I can't find how to break to a new line after 3 items have been inserted:
<div class="row card-group">
<div *ngFor="let presentation of presentations" class="col-4 card">
<a [routerLink]="['/presentation', presentation._id]">{{presentation.title}}</a>
</div>
</div>
I've seen other answer saying to use the clearfix class, but this has not worked so far for me.
You need a wrapping div with the class col-4 arroud the <div> with card class. thats how grid layout works.
see using grid markup section here: https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup
so:
<div class="row card-group">
<div class="col-4" *ngFor="let presentation of presentations">
<div class="card">
<a [routerLink]="['/presentation', presentation._id]">{{presentation.title}}</a>
</div>
</div>
</div>
sample plunker: https://plnkr.co/edit/8LDBMorXBB1OqI0bolS6?p=preview
Thanks to @zimSystem I found something that works.
<div class="row">
<div *ngFor="let presentation of presentations" class="col-4 card">
<a [routerLink]="['/presentation', presentation._id]"><img class="card-img-top" src="..." alt="Card image cap"></a>
<div class="card-block">
...
</div>
</div>
</div>
The card-group is preventing the col's from wrapping to the next "line". Place the cards inside the columns, and instead use h-100 to make the cards full/same height. This way the Angular code won't need to iterate the row.
<div class="row">
<div class="col-4">
<div class="card h-100">
..
</div>
</div>
<div class="col-4">
<div class="card h-100">
..
</div>
</div>
</div>