Bootstrap dynamically displaying flex items and cannot start a new row - css

Question

I'm implementing code where I dynamically display flex items where each one takes 1/2 the display width, so after two items I need to start a new row.
class="d-flex flex-row" doesn't seem to do that for me. How can I essentially as a after every two items displayed?
<div class="d-flex mb-3">
<div class="card col-6 m-3">
<p>Card 1</p>
</div>
<div class="card col-6 m-3">
<p>Card 2</p>
</div>
<div class="d-flex flex-row"></div>
<div class="card col-6 m-3">
<p>Card 3</p>
</div>
<div class="card col-6 m-3">
<p>Card 4</p>
</div>
</div>

Answer 1

You are very close! I think the issue is flex calculating margins in the width of the element, so you effectively have a (50% + margin) element specified in your col-6 m-3 classes. This pushes the elements to the next row.
The solution is to apply a wrapper containing the layout class col-6 and leave the margin on the children.
You also do not have a row class on the parent of your columns, so be sure to add that as well!
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row d-flex flex-row mb-3">
<div class="col-6">
<div class="card m-3">
<p>Card 1</p>
</div>
</div>
<div class="col-6">
<div class="card m-3">
<p>Card 2</p>
</div>
</div>
<div class="col-6">
<div class="card m-3">
<p>Card 3</p>
</div>
</div>
<div class="col-6">
<div class="card m-3">
<p>Card 4</p>
</div>
</div>
</div>

Answer 2

use row to make row instead of d-flex flex-row your code should be like:
<div class="row">
<div class="card col-6">
<p>Card 1</p>
</div>
<div class="card col-6">
<p>Card 2</p>
</div>
<div></div>
<div class="card col-6">
<p>Card 3</p>
</div>
<div class="card col-6">
<p>Card 4</p>
</div>
</div>
(card 3 and 4 will automatically go to a new row as there's no remaining space for them)
I removed the margin as if you added margins the card space will be more than 50%
if you want to add space around the card you can make the cards inside divs and give the divs col-6 and then give the divs p-3 like that:
<div class="row w-100 mx-auto">
<div class="col-6 p-3">
<div class="card">
<p>Card 1</p>
</div>
</div>
<div class="col-6 p-3">
<div class="card">
<p>Card 2</p>
</div>
</div>
<div></div>
<div class="col-6 p-3">
<div class="card">
<p>Card 3</p>
</div>
</div>
<div class="col-6 p-3">
<div class="card">
<p>Card 4</p>
</div>
</div>
</div>