i want to create a loop with bootstrap card

Question

I have a problem viewing a page. On my page every time I create an "event" I would like the cards to be placed side by side with a maximum of two / three "cards" per row. While now they are placed one below the other. How can I create a loop that assigns me a maximum card value per line. Or can I solve it with css?

eventList.jsp

<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="All" role="tabpanel"
            aria-labelledby="home-tab">
            <c:if test="${allList.size() == 0}" var="event" scope="session">
                <h4 class="text-center py-3 empty-events">
                    <i class="far fa-folder-open"></i> No event
                </h4>
            </c:if>
            <div class="col-md-5">
                <c:forEach var="event" items="${allList}">
                    <br>
                    <div class="card">
                        <img class="card-img-top img-fluid"
                            src="resources/img/all.jpg" alt="">
                        <div class="card-body">
                            <h4 class="card-title text-center">${event.title}</h4>
                            <hr>
                            <h5 class="card-title">${event.description}</h5>
                            <p class="card-text">
                                <b><i class="far fa-calendar-alt"></i> Date: ${event.date}</b>
                            </p>
                            <p class="card-text">
                                <b><i class="fas fa-male"></i> Manager:
                                    ${event.username}</b>
                            </p>
                        </div>
                        <div class="col text-center">
                        <a href="eventDetails?id=${event.id}" class="btn btn-danger"><i
                            class="fas fa-external-link-alt"></i> Open</a>
                        </div>
                        <br>
                    </div>
                </c:forEach>
            </div>
        </div>
  ........
 </div>

see if your use case is same of this. This is kind of idea, not exact solution https://stackoverflow.com/questions/62371077/create-dynamic-equal-sized-small-squares-grid-in-fixed-size-big-square — Byrisetti Hemanth, Jun 29 '20 at 16:13
add some `count` variable to keep count of the card added and if 2 or 3 card are added start the count from `1` Also use `
//divide your card according to col-sm-4..etc..
` — Swati, Jun 30 '20 at 04:30
@Swati, yeah, i solved by adding `
` and reversing first `` and after `
`. Now i have three card for row. — Daniele Vallorani, Jun 30 '20 at 10:41
you can add that as answer and accept your own answer so that it will help others in future . — Swati, Jun 30 '20 at 13:04

score 1 · Accepted Answer · answered Jul 01 '20 at 14:43

I've found the solution:

<div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="All" role="tabpanel"
            aria-labelledby="home-tab">
            <c:if test="${allList.size() == 0}" var="event" scope="session">
                <h4 class="text-center py-3 empty-events">
                    <i class="far fa-folder-open"></i> No event
                </h4>
            </c:if>
        <div class="row">
            <c:forEach var="event" items="${allList}">
                <div class="col-md-4">
                    <br>
                    <div class="card">
                        <img class="card-img-top img-fluid"
                            src="resources/img/all.jpg" alt="">
                        <div class="card-body">
                            <h4 class="card-title text-center">${event.title}</h4>
                            <hr>
                            <h5 class="card-title">${event.description}</h5>
                            <p class="card-text">
                                <b><i class="far fa-calendar-alt"></i> Date:</b> ${event.date}
                            </p>
                            <p class="card-text">
                                <b><i class="fa fa-user"></i> Manager:</b>
                                    ${event.username}
                            </p>
                        </div>
                        <div class="col text-center">
                        <a href="eventDetails?id=${event.id}" class="btn btn-danger"><i
                            class="fas fa-external-link-alt"></i> Open</a>
                        </div>
                        <br>
                    </div>
                </div>
            </c:forEach>
        </div>

i want to create a loop with bootstrap card

1 Answers1