Create grid with bootstrap card component - html

Question

I'm trying to create a grid using the Bootstrap 4 card component. For this, I have read the documentation and used the card-deck option. I want that every row has two columns with a similar behaviour to col-12 col-md-6, with the particularity that the second column will also be splited into two rows, each one having an horizontal card. I have this piece of code:
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<img
class="card-img-top"
src$="{{getArticleImage2(article1)}}"
/>
<div class="card-body py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
{{getSources(article1)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article1.schema:headline}}
</p>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
{{getSources(article2)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article2.schema:headline}}
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
{{getSources(article3)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article3.schema:headline}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is that with this disposition I have three cols instead of two. The last two cards are displayed horizontally, but they are not stacked one below the other. Here is a code snippet. How could I achieve this?

Answer 1

if you added a div with class card-columns like that:
<div class="card-deck">
<div class="card-columns">
<div class="card">
<img
class="card-img-top"
src=""
/>
<div class="card-body py-2">
//.................
it will give you two cloumns one with a card displayed vertically and the other contains two horizontal cards.
Also read the last section of the documentation maybe it will be helpful for you to specify how many cards included in one column
https://getbootstrap.com/docs/4.3/components/card/