It's difficult to provide an exact solution without examining your source code. I recommend that you include it for better assistance.
Using triple backticks before and after a code block will display it neatly with syntax highlighting!
Based on similar issues I've encountered in the past, here's my best guess regarding the actual question:
<div class="container">
<div class="row">
<div class="col-6">
<div style="height: 250px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 100px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 60px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 200px" class="card m-2 bg-primary"></div>
</div>
</div>
</div>
Bootstrap uses a 12-column layout system, where each row consists of 12 equal column units that can be distributed between child columns.
In the provided code, each column is set to be 6 column units wide (col-6), making them half the width of the parent container.
The first two columns fit perfectly, but the third column overflows and needs to accommodate an overflow situation.
When a row overflows, it behaves as if a second row is created to contain the overflow:
<div class="container">
<div class="row">
<div class="col-6">
<div style="height: 250px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 100px" class="card m-2 bg-primary"></div>
</div>
<!-- End of the first row -->
<!-- Beginning of the second row -->
<div class="col-6">
<div style="height: 60px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<div style="height: 200px" class="card m-2 bg-primary"></div>
</div>
</div>
</div>
To resolve this issue, ensure that each column element contains all the child elements for that column:
<div class="container">
<div class="row">
<div class="col-6">
<!-- Place all elements for the first column here -->
<div style="height: 250px" class="card m-2 bg-primary"></div>
<div style="height: 100px" class="card m-2 bg-primary"></div>
</div>
<div class="col-6">
<!-- Place all elements for the second column here -->
<div style="height: 60px" class="card m-2 bg-primary"></div>
<div style="height: 200px" class="card m-2 bg-primary"></div>
</div>
</div>
</div>
The examples provided focus on two columns, but I've created a sample with four columns, available here.
For more information on the Bootstrap 4 grid system, refer to their documentation here.