Close bootstrap row and start a new row Matrix

Question

I need to figure out how to close out the columns if it equals 12 and then open a new row. I have a Matrix field set up with rows, but it needs to break with a new row if the columns equal 12.

Any suggestions?

Answer 1

You could track the total used columns in a var and check if its less than 12.

{% set col_count = 0 %}
{% for item in items %}
    {% switch item.type %}
        {% case "value1" %}
            {% set col_size = 4 %}
        {% case "value2" %}
            {% set col_size = 6 %}
    {% endswitch %}

    {% if not loop.first and (col_count + col_size) > 12 %}
        </div>
        {% set col_count = 0 %}
    {% endif %}

    {% if col_count == 0 %}
        <div class="row">
    {% endif %}

    {% set col_count = col_count + col_size %}

    <div class="column small-{{ col_size }}">
        {{ item.title }}
    </div>

    {% if loop.last %}
        </div>
    {% endif %}

{% endfor %}