Answers.Body: <p>You can use the special <code>loop</code> variable to check if the current index is even or odd:</p>
  <pre class="lang-twig prettyprint-override"><code>{% for q in tableItem %}
      {% if loop.index is even %}
          {# output even items #}
      {% endif %}
  {% endfor %}
  
  {% for q in tableItem %}
      {% if loop.index is odd %}
          {# output odd items #}
      {% endif %}
  {% endfor %}
  </code></pre>
  <p>Though I would rethink this approach. You're tightly coupling your template logic to your styling, which usually results in HTML code that is semantically incorrect. Instead, I'd use a single loop to output the items in order and then user either either a grid to arrange items using <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area" rel="nofollow noreferrer">grid-area</a> or, if you're using the Bootstrap flexbox row, rearrange them with <a href="https://getbootstrap.com/docs/5.1/utilities/flex/#order" rel="nofollow noreferrer"><code>order-*</code> classes</a>.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2022-04-13T08:23:06.710Z
Answers.LastActivityDate: 2022-04-13T08:23:06.710Z
Answers.UserDisplayName: MoritzLost
Body: <p>I'm building a Craft website on Bootstrap 5.
  I want to split the output of a loop evenly across 2 seperate columns.
  There is an image column in the middle so the loop can't be continuos.
  The amount of items in the loop will vary so I need a flexible solution.</p>
  <p>This is my current twig setup which outputs all entries in the table.</p>
  <pre><code>                {% for q in tableItem %}
                  &lt;div class=&quot;d-flex mb-5 table-item&quot; data-aos=&quot;fade-up&quot;&gt; 
                      &lt;div class=&quot;flex-shrink-0&quot;&gt;
                      {% for asset in q.icon %}
                      &lt;img src=&quot;{{ asset.url }}&quot;&gt;
                      {% endfor %}
                      &lt;/div&gt;
                  &lt;div class=&quot;flex-grow-1 ms-4&quot;&gt;
                      &lt;h5 class=&quot;mb-2&quot;&gt;{{q.heading}} &lt;/h5&gt;
                      &lt;p&gt;{{ q.description }}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  {% endfor %}
              &lt;/div&gt;
  </code></pre>
  
Tags: <templating><forloop>
Title: How can I output only half the entries in a loop?
ThreadText: # How can I output only half the entries in a loop?
  
  (Asked by: username_0 on 2022-04-13)
  
  I'm building a Craft website on Bootstrap 5.
  I want to split the output of a loop evenly across 2 seperate columns.
  There is an image column in the middle so the loop can't be continuos.
  The amount of items in the loop will vary so I need a flexible solution.
  
  This is my current twig setup which outputs all entries in the table.
  
  ```
                  {% for q in tableItem %}
                  <div class="d-flex mb-5 table-item" data-aos="fade-up"> 
                      <div class="flex-shrink-0">
                      {% for asset in q.icon %}
                      <img src="{{ asset.url }}">
                      {% endfor %}
                      </div>
                  <div class="flex-grow-1 ms-4">
                      <h5 class="mb-2">{{q.heading}} </h5>
                      <p>{{ q.description }}</p>
                  </div>
                  </div>
                  {% endfor %}
              </div>
  
  ```
  
  **Tags:** templating, forloop
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2022-04-13. Score: 2 | Accepted answer
  
  You can use the special `loop` variable to check if the current index is even or odd:
  
  ```twig
  {% for q in tableItem %}
      {% if loop.index is even %}
          {# output even items #}
      {% endif %}
  {% endfor %}
  
  {% for q in tableItem %}
      {% if loop.index is odd %}
          {# output odd items #}
      {% endif %}
  {% endfor %}
  
  ```
  
  Though I would rethink this approach. You're tightly coupling your template logic to your styling, which usually results in HTML code that is semantically incorrect. Instead, I'd use a single loop to output the items in order and then user either either a grid to arrange items using [grid-area](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area) or, if you're using the Bootstrap flexbox row, rearrange them with [`order-*` classes](https://getbootstrap.com/docs/5.1/utilities/flex/#order).
  
  
  ---
  
  