Loop Row in Bootstrap Every 3 Columns

Loop row in bootstrap every 3 columns

Edit: Originally I posted this quickly from the top of my head. Thanks, Wael Assaf for pointing out an improvement, which I have used. Also, I have added a couple of changes to the code, now it is versatile and can be used for a variable number of columns you can choose by changing the variable $numOfCols

You need to add a div for each row. Then the floating divs you have, will not just wrap around but instead will be in their own container.

The bootstrap class row is perfect for this:

Method 1 (not recommended for new versions of HTML and Browser): This method is for older version on HTML and browser because new versions of HTML and browser have inbuild functions to auto close missing tags so when you use code below it will automatically close pre-defined tag <div class="row"> rather than waiting for if condition to close that tag in result causing improper layout.

Note: you can try and observe result by inspecting elements

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
<div class="row">
<?php
foreach ($rows as $row){
?>  
        <div class="col-md-<?php echo $bootstrapColWidth; ?>">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>
<?php
    $rowCount++;
    if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
}
?>
</div>

Uses PHP modulus operator to echo the open and close of each row at the right points.

Method 2 (recommended): This method is to overcome the problem faced by method 1, as a result, causing proper layout for modern browser.

<?php
//Columns must be a factor of 12 (1,2,3,4,6,12)
$numOfCols = 4;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
foreach ($rows as $row){
  if($rowCount % $numOfCols == 0) { ?> <div class="row"> <?php } 
    $rowCount++; ?>  
        <div class="col-md-<?php echo $bootstrapColWidth; ?>">
            <div class="thumbnail">
                <img src="user_file/<?php echo $row->foto; ?>">
            </div>
        </div>
<?php
    if($rowCount % $numOfCols == 0) { ?> </div> <?php } } ?>

Note: you can try and observe result by inspecting elements

Hope this helps.

create new row after every 3 column in loop

The code to print row should be inside foreach loop in a specific condition. And the condition for printing row should be as:

<?php
foreach ($location_list as $key => $location) {
    if ($key % 3 == 0) {
        echo '<div class = "row">';
    }

    echo "<div class ='col-md-4'>
          <hr> $location->address </hr>
           <hr> $location->name </hr>
           <hr> $location->pin </hr>
       </div> ";

    if ($key % 3 == 2) {
        echo '</div>';
    }
}
?>

Looping data which contains 3 column each row

Just chunk your data into sets of 3 and add a nested loop to iterate each set's data.

foreach (array_chunk($products, 3) as $set) {
    echo '<div class="row">';
        foreach ($set as $product) {
            echo '<div class="col-lg-4 col-md-4">';
                ...
            echo '</div>';
        }
   echo '</div>';
}

Best way to loop the angular 4 with bootstrap columns?

"If we define the row before ngFor all the columns are displaying in a single row."

Not if you add [ngClass] to the same element that is being iterated:

<div class="row">  
    <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

You also don't need those rowType fields, you could do something like this:

[ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 < 1)

How to put bootstrap 4 columns in each rows in foreach loop

Try this, if i got you right you need create row for 4 columns and then again create row.

@for (int i = 0; i < Model.Count; i++)
{
    if (i > 0 && i % 4 == 0)
    {
        @:</div><div class="row">
    }
     <div class="col-lg-3 col-md-6 col-xs-6">
            <div class="team-item">
                <div class="team-img">
                    <a href="#"><img class="img-fluid" src="~/AlphaAssets/images/team/@Model[i].ImageName" alt="" /></a>
                    <div class="social-icon">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-google-plus"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                    </div>
                </div>

                <div class="team-body">
                    <h3 class="name">@Model[i].Name</h3>
                    <span class="designation">@Model[i].Designation</span>
                </div>
            </div>
        </div>

Looping angular object in bootstrap grid

The problem that you are facing comes to the fact that you are creating the loop on the container div; which then creates 3 container per card instead of a single container.

   <div class="container" *ngFor="let item of post">
      <div class="row">
        <div class="col-sm">
          <h2>{{item.title}}</h2>
    
        </div>
        
      </div>
    </div>

In order to implement what you want (a container with N cards) you have to declare the loop on the card elements.

   <div class="container">
      <div class="row">
        <div class="col-sm" *ngFor="let item of post">
          <h2>{{item.title}}</h2
        </div>
      </div>
    </div>

That way you will have a container, then a row, and finally the list of components created from the iteration.

You can read a little here:
Angular ngFor example and here
ngForOf Directive

Show different number of column per row in foreach loop

You can use nth-child selector along with CSS grid to get the desired result.

First Grid Style

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
}

img:nth-child(6n + 1),
img:nth-child(6n + 2){
  grid-column: span 2;
}

img {
  width: 100%;
  height: 100%;
}

<div class="grid-container">
  <img src="https://picsum.photos/id/10/400" />
  <img src="https://picsum.photos/id/20/400" />
  <img src="https://picsum.photos/id/30/400" />
  <img src="https://picsum.photos/id/40/400" />
  <img src="https://picsum.photos/id/50/400" />
  <img src="https://picsum.photos/id/60/400" />
</div>

 foreach(array_chunk($entries, 4) as $entriesRow) {
     echo '<div class="row">';
         foreach ($entriesRow as $entry) {
             echo "<div class='col-md-3'>$entry</div>";
         }
     echo '</div>';
 }