title: Thymeleaf - How to iterate list of objects in multiple columns of html with Bootstrap 4.5.0+
body: <p>I have the following in Thymeleaf template:</p>
  <pre><code>&lt;div class=&quot;row col-md-12&quot;&gt;
          &lt;div th:each=&quot;item : ${itemList}&quot;&gt;
              &lt;div class=&quot;col-md-3&quot;&gt;
                  &lt;div class=&quot;card custom-card&quot;
                      style=&quot;width: 15rem; display: inline-block&quot;&gt;
                      &lt;div class=&quot;card-body&quot;&gt;
                          &lt;h5 class=&quot;card-title&quot; th:text=&quot;${'item Id - ' + item.id}&quot;&gt;Id&lt;/h5&gt;
                          &lt;p class=&quot;card-text&quot; th:text=&quot;${item.itemname}&quot;&gt;Name&lt;/p&gt;
                          &lt;p class=&quot;card-text&quot; th:text=&quot;${item.itemdescription}&quot;&gt;Desc&lt;/p&gt;
                          &lt;a th:href=&quot;@{'/createforItemId/' + ${item.id}}&quot;
                              class=&quot;stretched-link btn btn-sm btn-primary mr-2&quot;&gt;&lt;i
                              class=&quot;fas fa-rocket mr-2&quot;&gt;&lt;/i&gt; Start New Discussion&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>I am trying to iterate the itemList in such a way that <code>each row in my html should have 4 cards in 4 columns (12/3)</code>.</p>
  <p>But currently I am getting only one &quot;Single&quot; column (huge) stacked with my list of objects.</p>
  <p><strong>What I am missing here?</strong></p>
  <p>I am open for any alternative solution too. Please suggest.</p>