When looping through div elements, they inherit default CSS styles. The content within the div may be uneven, which requires Bootstrap to automatically adjust for the best display results, as intended. To achieve this, you need to set a specific height for your div, although this could potentially affect responsiveness. In such cases, it might be necessary to write custom @media code in CSS. If you want to use four spaces without using a row, you can structure it like this:
<div class="col-md-4 customCss">Content1</div>
<div class="col-md-4 customCss>"Content2</div>
<div class=“col-md-4 customCss"><Content3</div>
In CSS:
.customCss{
min-height:50px;// Your desired properties
}
UPDATED
I have used PHP in my example, but you can implement this in Angular or any other language of your choice.
Assuming $rows is an array:
<?php
$rows = array(array('id'='a'), array('id'='b'),array('id'='c'), array('id'='d'),array('id'='e'));
$i=0; // Initialize counter
foreach ($rows as $row){
if ($i%3==0) { // Check if the counter is a multiple of 3 ?>
<div class="row"> <?php } ?>
<div class="col-md-4">
Content
</div>
<?php $i++; ?>
<?php if($i%3==0) { // Check if the counter is a multiple of 3 ?>
</div>
<?php } ?>
<?php } ?>
<?php if($i%3!=0) { // Close the div if loop does not end exactly on a multiple of 3 ?>
</div>
<?php } ?>
Feel free to reach out if you need further clarification!