title: Use bootstrap grid with variable number of cells
body: <p>I have a photo album application where a user can upload up to 50 pictures.  I want the pictures to display 4 pictures to a row.  The photo album is dynamic meaning a user can add and delete pictures via ajax.  </p>
  
  <p>How can the bootstrap grid be used if cells are added/deleted without having to re-adjust the  DOM elements and rows constantly?</p>
  
  <p>For example if a user loads an existing photo album with 5 pictures the bootstrap grid looks like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If the user deletes picture #2 the grid would be (no 2nd row, 5 element gets shifted to 4th element)</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then the user adds 2 new pictures (via ajax), a new row is needed and 2 more columns.</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
     &lt;div class="col-md-3"&gt; a bunch of html here &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can bootstrap responsive design do this without rows or should I just use floating divs?  Keep in mind these columns are all added/deleted via ajax (except for the initial page load) so I'm manipulating the DOM (rows/columns).  Re-calculating rows/columns for every change would be a pain.</p>