I am facing an issue with the layout of my page. Whenever I create an "event", the cards appear stacked on top of each other instead of side by side. Is there a way to limit the number of cards per row using a loop or 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>