title: Freemarker: Display data in grid using bootstrap
body: <p>I have a list with PATHs to photos in freemarker and I need to display photos in HTML page. I iterate my list like that</p>
  <pre><code>&lt;#if photos?has_content&gt;
      &lt;#list photos as photo&gt;
          &lt;img src=${photo}
      &lt;/#list&gt;
  &lt;/#if&gt;
  </code></pre>
  <p>And also I have HTML page that uses bootstrap classes for displaying this photos in grid (3 columns)</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-4&quot;&gt;
              &lt;div class=&quot;photo&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-lg-4&quot;&gt;
              &lt;div class=&quot;photo&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-lg-4&quot;&gt;
              &lt;div class=&quot;photo&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row&quot;&gt;
          ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Number of rows depends on the number of photos, but it couldn't be predicted. I don't know how to add opening and closing div for row after every first and third photo.</p>
  <p>Hope someone can help me with this.
  Thanks!</p>
  <p><a href="https://i.stack.imgur.com/X4YwC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X4YwC.png" alt="that is how it should look" /></a></p>