Bootstrap 4 all cards same size (multiple or single) - css

Question

I am facing an issue while trying to create a page contain N cards(single or multiple)
while in multiple all cards are as I want them to be, when it is a single card it shrinks and is not presented as I want it to be :
and a single card looks like this:
I am trying to understand what I am doing wrong.
this is the card HTML :
<div class="card text-white bg-danger">
<div class="card-header">
<div class="row">
<div class="col col-xs-3">
<i class="fa fa-euro">{{expenseItem.amount}}</i>
</div>
<div class="col col-xs-9 text-right">
<div class="d-block huge">{{count}}</div>
<div class="d-block">{{label}}</div>
<div class="card-body">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<span class="float-left">Details </span>
<a href="javascript:void(0)" class="float-left card-inverse">
<span ><i class="fa fa-arrow-circle-left"></i></span>
</a>
</div>
</div>
and it is located inside acomponent that should be a list :
<div class="container">
<div class="row">
<hr>
</div>
<div class="row">
<div class="page-header">
<h1 >Comp header</h1>
<h4> total epenses per month {{expenses.total}}</h4>
<app-pagination [paginationSize]="limit" [total]="total" (requierdPage)="getPage($event)"></app-pagination>
</div>
</div>
<hr>
<!--<div class="row" >
<div class="col-xs-3 col-lg-4" *ngFor="let expense of expensesList" >
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>-->
<!--<div class="container">
<div class="row">
<div class="card-deck" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
<!– <div class="card">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider
card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.This is a wider
card with supporting text below as a natural lead-in to additional content.
This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>–>
</div>
</div>
</div>-->
<div class="row" >
<div class="col-sm-6 col-xs-6 col-xl-6 col-md-6 col-lg-6" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>
<div class="row add">
<div class="col-xs-1 offset-xs-1 align-self-sm-end">
<i class="fa fa-plus-square-o fa-4x" aria-hidden="true" (click)="Uopen()"></i>
</div>
<app-add-expense (onFormSubmitted)="onDataSubmit($event)"></app-add-expense>
</div>
</div>
what am I missing here?

Answer 1

The .card-deck should be placed directly in container instead of row. Remove the .row as it's flexbox, and should be used only to contain grid columns (col-*) which you're not using for the .card-deck.
<div class="container">
<div class="card-deck">
<div class="card text-white bg-danger">
</div>
<div class="card text-white bg-danger">
</div>
(repeat 1..n cards)
</div>
</div>
https://www.codeply.com/go/Gmch54KdgL