Angular 6 ngFor card in two columns

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>