title: How can I group a foreach loop's output?
body: <p>I'm working with Bootstrap's grid and I'm iterating through an array of names. The problem is that I don't know how to place X amount of results per parent div. </p>
  
  <p>$names = mysql result containing 9 names.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;?php
      foreach ($names as $name){
       echo '
        &lt;div class="col-xs-3 col-sm-3"&gt;
          &lt;p&gt;Customer name:'.$name.'&lt;/p&gt;
        &lt;/div&gt;';  
       }  
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That would output this 9 times.</p>
  
  <pre><code>&lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: Foo &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: bob &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: jim &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: dave &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: lucy &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: sarah &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: geoff &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: matt &lt;/p&gt;
  &lt;/div&gt; 
  &lt;div class="col-xs-3 col-sm-3"&gt;
    &lt;p&gt; Customer name: alex &lt;/p&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>How can I make it output 3 column divs per <code>.row</code> like this?</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: Foo &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: bob &lt;/p&gt;
      &lt;/div&gt; 
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: jim &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: dave &lt;/p&gt;
      &lt;/div&gt; 
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: lucy &lt;/p&gt;
      &lt;/div&gt; 
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: sarah &lt;/p&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: geoff &lt;/p&gt;
      &lt;/div&gt; 
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: matt &lt;/p&gt;
      &lt;/div&gt; 
      &lt;div class="col-xs-3 col-sm-3"&gt;
        &lt;p&gt; Customer name: alex &lt;/p&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>