I am trying to iterate cards inside of card groups from Bootstrap using Jinja, so there are no more than 4 cards inside of 1 group, but I finish with 1 card side to side. This is my code:

{% set n = 0 %}
{% for vid in videos %}
    {% if n % 4 == 0 %}
        {% if n % 4 == 0 %}
            </div> <!-- Close previous card-group -->
        {% endif %}
        <div class="card-group"> <!-- Start a new card-group -->
    {% endif %}
    <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
    {% set n = n + 1 %}
{% endfor %}
</div>

I tried changing different div’s places, but it didn’t do a lot