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>

Answer 1

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>