Ad

How Can I Display Results In Bootstrap Grid In Octobercms?

I have this right now in my octobercms code to display results. It currently displays it in a list but I want it in bootstrap grid of 3 equal columns.

{% for cats in cats %}
  <div>
    <img src="{{ cats.poster.path }}"><br>
    <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ 'subcategory'|page({ slug: cats.slug }) }}">
      {{ cats.cat_title }}
    </a>
  </div>
{% else %}
  <div class="no-data">{{ noRecordsMessage }}</div>
{% endfor %}

Any straight forward way of doing this?

Ad

Answer

Got it done using this

{% for row in cats|batch(3) %}
<div class="row">
    {% for cats in row %}
        <div class="col-sm-4">
            <img src="{{ cats.poster.path }}"><br>
            <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ 'subcategory'|page({ slug: cats.slug }) }}">{{ cats.cat_title }}</a>
        </div>
    {% endfor %}
</div>
{% else %}
    <div class="no-data">{{ noRecordsMessage }}</div>
{% endfor %}
Ad
source: stackoverflow.com
Ad