How to give space between two rows of products in Angular4

Question

In my application I am binding the product and it's details from API response dynamically .Here I have an issue like there is no space between the products when the row count more than one.

Html.

<div class="row">

    <div class="col-sm-4 column" *ngFor="let product of products;let i =index;">
        <div class="card">
            <div class="card-img-top card-img-top-250 one">
                <img routerLink="/my-cart" class="img-fluid" [src]="product['IMAGE_PATH_1']" alt="image">
                <img routerLink="/my-cart" class="img-fluid two" [src]="product['IMAGE_PATH_2']" alt="image">
            </div>
            <div class="card-block pt-2">
                <div class="col-sm-12 text-center card-text">
                    <span>{{product?.ITEM_DESCRIPTION}}</span>
                    <br>
                    <input type="hidden" #productCode value="{{product?.PRODUCT_CODE}}">
                    <p class="font-weight-bold text-primary" >{{product?.PRODUCT_PRICE}} &#8377;</p>
                </div>
                <button type="button" class="btn  btn-primary col-sm-12 corner" routerLink="/my-cart" (click)="getProductCode(productCode.value)">
                    <strong>View Details</strong>
                </button>
            </div>
        </div>
    </div>

</div>

The above code is a separate component (grid component),I just call this component in another component (app component)

 <div class="row  container" >
          <app-grid></app-grid>
 </div>

Image :

Can anyone help me to fix this .

by the way you create nestead `row` remove row class from `
' — לבני מלכה, May 08 '18 at 09:04
@לבנימלכה removed it ,still it shows as in the above image — Nikson, May 08 '18 at 09:06
I think flexbox is the way to go for this. https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items — Ishmeet Singh, May 08 '18 at 09:11

score 2 · Accepted Answer · edited May 08 '18 at 09:53

Try to use Bootstrap 4 spacing utilities: https://getbootstrap.com/docs/4.0/utilities/spacing/

I added p-3 to <div class="col-sm-4 column p-3" *ngFor="let product of products;let i =index;">

<div class="row">

    <div class="col-sm-4 column p-3" *ngFor="let product of products;let i =index;">
        <div class="card">
            <div class="card-img-top card-img-top-250 one">
                <img routerLink="/my-cart" class="img-fluid" [src]="product['IMAGE_PATH_1']" alt="image">
                <img routerLink="/my-cart" class="img-fluid two" [src]="product['IMAGE_PATH_2']" alt="image">
            </div>
            <div class="card-block pt-2">
                <div class="col-sm-12 text-center card-text">
                    <span>{{product?.ITEM_DESCRIPTION}}</span>
                    <br>
                    <input type="hidden" #productCode value="{{product?.PRODUCT_CODE}}">
                    <p class="font-weight-bold text-primary" >{{product?.PRODUCT_PRICE}} &#8377;</p>
                </div>
                <button type="button" class="btn  btn-primary col-sm-12 corner" routerLink="/my-cart" (click)="getProductCode(productCode.value)">
                    <strong>View Details</strong>
                </button>
            </div>
        </div>
    </div>

</div>

Thanks a lot ...You saved my time – Nikson May 08 '18 at 09:14 — Nikson, May 08 '18 at 09:14

How to give space between two rows of products in Angular4

1 Answers1