How to create a new line of cards using ngFor and bootstrap 4

Question

I am trying to use the Bootstrap 4 map group functionality with Angular ngFor.

Here is the HTML that I have now, but I can’t find how to split into a new line after 3 elements 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 saw another answer saying that I am using the clearfix class, but this has not worked yet.

Answer 1

You need a wrapper divwith class col-4arroud <div>with class card. Here's how the grid layout works.

. : https://v4-alpha.getbootstrap.com/components/card/#using-grid-markup

:

<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

Answer 2

card-group "". card h-100, / . , Angular .

    <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>

http://www.codeply.com/go/yWdYL5GrTu

Answer 3

@zimSystem -, .

<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>