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

Question

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.

Why use `card-group`? It doesn't allow wrapping the way a row>col does. — Carol Skelly, May 02 '17 at 20:33
@zimSystem Because I want the cards to have the same height on within each row. So I basically want o mulitple rows of cardgroups — otusweb, May 02 '17 at 20:39
The `row` is already same height because BS4 uses flexbox. You don't need to iterate the `row`. — Carol Skelly, May 02 '17 at 20:51

score 20 · Answer 1 · answered May 02 '17 at 20:46

20

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

answered May 02 '17 at 20:46

Ahmed Musallam

9,523
4
27
47

1

It works but if the card content of the card don't have the same height, the card group are not sized appropriately see https://plnkr.co/edit/QeFpHMVyQwo81SsGfeTd?p=preview – otusweb May 03 '17 at 07:26
yeah, that is not going to work without CSS changes. The only other option you have is to split the array into arrays of 3. here is a sample plunker: https://plnkr.co/edit/jUtAEEpyeGTYtVNUDLQS?p=preview. Note that with this approach, each 3 itesm will have the same height BUT not all items will. Note, expand the preview window to see it working. – Ahmed Musallam May 03 '17 at 07:57
This helped a lot! Thanks – Wizzardzz Aug 19 '19 at 15:14

score 1 · Answer 2 · answered May 03 '17 at 07:41

1

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>

answered May 03 '17 at 07:41

otusweb

1,638
1
19
30

Good job! I modified this way using your code - `

...

` – coderpc Jun 10 '18 at 19:13

score 0 · Answer 3 · answered May 02 '17 at 20:56

0

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>

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

answered May 02 '17 at 20:56

Carol Skelly

351,302
90
710
624

1

Unfortunately if the content of the text on each card is a different number of line, then the cards don't have the same height. – otusweb May 03 '17 at 07:29
This works..but it stretches the height of the image – DaveAAA Oct 07 '19 at 02:29
@DaveAAA what image? there's no mention of an image in the question. – Carol Skelly Oct 07 '19 at 11:22

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

3 Answers3

Linked