Angular 6 ngFor card in two columns - css

Question

I'm generating cards in my *ngFor div.
It is generating them vertically (down), but I want angular to generate them horizontally (right).
My idea was to put the class col-6, but that doesn't work, it just puts half of the card under each other.
This is the code:
<div class="card-body">
<div class="card" *ngFor="let BLA of PACKAGE.blas; let index=index" class="p-1">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
This is what I have:
And I want this:
I tried adding col-6 to the classes but it doesn't respond.
How can I achieve this effect ?

Answer 1

That has nothing to do with Angular, use a display: flex on the card-body and set flex-wrap: wrap; and flex-direction: row;:
.card-data {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card {
width: 40%;
height: 100px;
line-height: 100px;
background-color: grey;
margin: 10px;
color: white;
text-align: center;
vertical-align: middle;
}
<div class="card-data">
<div class="card">
card 1
</div>
<div class="card">
card 2
</div>
<div class="card">
card 3
</div>
</div>

Answer 2

Change parent div class to row and add class col-6 to card row where your loop running
<div class="row">
<div class="card col-6 p-1" *ngFor="let BLA of PACKAGE.blas; let index=index">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
You also have extra card div under loop, remove that for clean design.