Answers.Body: <p>To add a row at every 4th item, you can use twig's batch filter:</p>
  
  <p><a href="http://twig.sensiolabs.org/doc/2.x/filters/batch.html" rel="nofollow noreferrer">Twig Batch</a></p>
  
  <p>Alternatively(a little more hacky) you can do <code>{% if loop.index is divisible by(4) %} stuff {% endif %}</code>. But batch is probably better.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-27T13:35:31.640Z
Answers.LastActivityDate: 2017-03-27T13:35:31.640Z
Answers.UserDisplayName: AbbeyDesign
Answers.Body: <p>Thanks for the replys! after doing some reading on bootstrap docs, it seems it was somewhat the right way to do it. But I had to do some changes in the way I refered to the images</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-03-28T08:36:11.033Z
Answers.LastActivityDate: 2017-03-28T08:36:11.033Z
Answers.UserDisplayName: laden
Body: <p>I am trying to make my image grid form out dynamically. I got it kinda working, But I need to figure out how to make my grid rows dynamic. I am kinda forcing it to start a new row at every 4th item right now, but dossent feel like the right way to do it.</p>
  
  <p>This is my code:</p>
  
  <pre><code>    &lt;div class="widewrapper weak-highlight"&gt; &lt;!-- knappebilde start --&gt;
  
      &lt;div class="container content col-lg-12"&gt;
          &lt;div class="row"&gt;
   {% for entry in craft.entries.section('knapperForside').limit(50).find() %}        
              &lt;div class="showroom-item col-md-3"&gt;
                  &lt;div class="image"&gt;
                      {{ entry.bilde }}
                      &lt;!-- overlay start --&gt;
                      &lt;a class="overlay" href="{{ entry.knappUrl }}"&gt;
                           &lt;i class="glyphicons search"&gt;&lt;/i&gt;
                           &lt;div class="name"&gt;{{ entry.title }}&lt;/div&gt;
                      &lt;/a&gt;
                      &lt;!-- overlay stop --&gt;
                  &lt;/div&gt;  &lt;!-- Image Stop --&gt;
                  &lt;a href="{{ entry.title }}"&gt;&lt;h4&gt;{{ entry.title }}&lt;/h4&gt;&lt;/a&gt;
              &lt;/div&gt;
    {% endfor %}           
           &lt;/div&gt;      &lt;!--  row stop  --&gt;
      &lt;/div&gt;          &lt;!-- Container Stop --&gt;        
  
          &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;     &lt;!-- knappebilde stop --&gt; 
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-03-27T10:11:16.437Z
Comments.Text: What is the desired result? Got any more details? Or possibly a screenshot of how it currently looks and what you want it to look like?
Comments.UserDisplayName: Jay
Tags: <assets><entry><structure><bootstrap-craft>
Title: Need help with dynamic image grid
ThreadText: # Need help with dynamic image grid
  
  (Asked by: username_0 on 2017-03-27)
  
  I am trying to make my image grid form out dynamically. I got it kinda working, But I need to figure out how to make my grid rows dynamic. I am kinda forcing it to start a new row at every 4th item right now, but dossent feel like the right way to do it.
  
  This is my code:
  
  ```
      <div class="widewrapper weak-highlight"> <!-- knappebilde start -->
  
      <div class="container content col-lg-12">
          <div class="row">
   {% for entry in craft.entries.section('knapperForside').limit(50).find() %}        
              <div class="showroom-item col-md-3">
                  <div class="image">
                      {{ entry.bilde }}
                      <!-- overlay start -->
                      <a class="overlay" href="{{ entry.knappUrl }}">
                           <i class="glyphicons search"></i>
                           <div class="name">{{ entry.title }}</div>
                      </a>
                      <!-- overlay stop -->
                  </div>  <!-- Image Stop -->
                  <a href="{{ entry.title }}"><h4>{{ entry.title }}</h4></a>
              </div>
    {% endfor %}           
           </div>      <!--  row stop  -->
      </div>          <!-- Container Stop -->        
  
          <div class="clearfix"></div>
  </div>     <!-- knappebilde stop --> 
  
  ```
  
  **Tags:** assets, entry, structure, bootstrap-craft
  
  > **Comments:**
  > **username_1**: What is the desired result? Got any more details? Or possibly a screenshot of how it currently looks and what you want it to look like?  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2017-03-27. Score: 1
  
  To add a row at every 4th item, you can use twig's batch filter:
  
  [Twig Batch](http://twig.sensiolabs.org/doc/2.x/filters/batch.html)
  
  Alternatively(a little more hacky) you can do `{% if loop.index is divisible by(4) %} stuff {% endif %}`. But batch is probably better.
  
  
  ---
  
  ### Answer by username_0 on 2017-03-28. Score: 0
  
  Thanks for the replys! after doing some reading on bootstrap docs, it seems it was somewhat the right way to do it. But I had to do some changes in the way I refered to the images
  
  
  ---
  
  