<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>

CC BY-SA 4.0
2022-04-13T08:23:06.710Z
2022-04-13T08:23:06.710Z
MoritzLost
<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>

<templating><forloop>
How can I output only half the entries in a loop?
# 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 %}
                 
                    
                    {% for asset in q.icon %}
                    
                    {% endfor %}
                    
                
                    {{q.heading}} 
                    {{ q.description }}
                
                
                {% endfor %}

**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:
{% 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 or, if you're using the Bootstrap flexbox row, rearrange them with order-* classes.


---

