Having trouble creating a page with N cards (single or multiple):
https://i.sstatic.net/20WXc.png
A single card appears like this:
https://i.sstatic.net/01bP0.png
I am unsure why the single card is not rendering correctly compared to multiple cards.
This is the HTML for the card:
<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>
The card is supposed to be inside a component that should display 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 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>
Not sure what I'm doing wrong here. Any insights?