Thymeleaf - How to iterate list of objects in multiple columns of html with Bootstrap 4.5.0+ - spring-mvc

Question

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

Answer 1

ODD but I got a workaround and is pretty much what I wanted. The following did the trick for me (notice the table without <td></td>):
<table style="width: 100%">
<tr th:each="item : ${itemList}">
<div class="card custom-card text-center mr-2 mt-2 ml-2 mb-2"
style="width: 15rem; display: inline-block">
<div class="card-body">
<h5 class="card-title" th:text="${'item Id - ' + item.id}">Id</h5>
<p class="card-text" th:text="${item.itemname}">Name</p>
<p class="card-text" th:text="${item.itemdescription}">Desc</p>
<a th:href="#{'/createforItemId/' + ${item.id}}"
class="stretched-link btn btn-sm btn-primary mr-2"><i
class="fas fa-rocket mr-2"></i> Start New Discussion</a>
</div>
</div>
</tr>
</table>
I am getting nice looking 4 columns with 4 cards with this css to add rounded borders for the boxes/cards:
.custom-card {
border-radius: 20px;
}
However, I am still waiting for some expert's suggestion here as the solution I came up with looks more like a patch work instead of a clean solution.

Answer 2

You should be able to include the th:each one level up to create 4 cards in a 12 slot row by col-xl-3.
<div class="row">
<div class="col-xl-3" th:each="item : ${itemList}">
<div class="card">
<!-- other stuff -->
</div>
</div>
</div>
It is similar to this later posted question that uses 3 cards instead of 4.
A solution like you have that uses a <div> in the <tr> will have your IDE complain that <div> is not a valid element in that location.
Note that you may still need to constrain the height of the card if they are not of the same size.