How to use th:each to combine rows with columns?

Asked

Viewed 133 times

0

I need to upload a list of recipes to my website so that it gets 3 recipes per line (Row). I am using th:each to display the recipes. Follows the code:

<div th:each="receita : ${receitas}">
            <div class="row">
                <div class="card card-style col-sm-3">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${receita.nome}"></h5>
                        <p class="card-text" th:text="${receita.preparo}"></p>
                        <a href="#" class="btn btn-primary">Veja mais</a>
                    </div>
                </div>
            </div>
        </div>

but this way is generated one below the other:

inserir a descrição da imagem aqui

If I try to put more cards inside Row this way:

<div th:each="receita : ${receitas}">
            <div class="row">
                <div class="card card-style col-sm-3">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${receita.nome}"></h5>
                        <p class="card-text" th:text="${receita.preparo}"></p>
                        <a href="#" class="btn btn-primary">Veja mais</a>
                    </div>
                </div>
            </div>

            <div class="card card-style col-sm-3">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${receita.nome}"> 
            </h5>
                        <p class="card-text" th:text="${receita.preparo}"> 
            </p>
                        <a href="#" class="btn btn-primary">Veja mais</a>
                    </div>
                </div>
            </div>

            <div class="card card-style col-sm-3">
                    <div class="card-body">
                        <h5 class="card-title" th:text="${receita.nome}"> 
            </h5>
                        <p class="card-text" th:text="${receita.preparo}"> 
            </p>
                        <a href="#" class="btn btn-primary">Veja mais</a>
                    </div>
                </div>
            </div>

        </div>

It only works if there are 3 recipes, because if there are 1, it will duplicate the data in the 3 cards.

How could I fix this?

thymeleaf

  • If you want to leave a space between them (and leave one underneath the other), put the spacing on div of foreach: <div class="col-sm-3" th:each="receita : ${receitas}">

  • I’d like you to stand next to each other, three per line

  • Here is the logic in PHP, in case you will have to declare a variable with the number of columns per row (in your case it would be $bootstrapColWidth=4). At the end of the foreach, you have to check if the index is divisible by 3, if it is, add one more row, so you’ll always have 3 elements per line. https://stackoverflow.com/questions/40561301/loop-row-in-bootstrap-every-3-columns

No answers

Browser other questions tagged thymeleaf

You are not signed in. Login or sign up in order to post.