[FIXED] JSP page for loop in row

Issue

I have made the following code

<%ArrayList<Doc> std = 
            (ArrayList<Doc>)request.getAttribute("doclist");
        for(Doc s:std){%>
        
        <div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><%=s.getId()%></h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    
    
        
        
            <%}%>

I get my cards like
Card 1
Card 2
Card 3
Card 4
Card 5

like wise for the number of data available

I want to have my cards display 4 per each row like
Card 1 Card 2 Card 3 Card 4
Card 5

How is it possible to do. im passing the data form a servlet

Solution

This kind of job comes under UI category.

You use below css for your reference:

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-left: 5em;
        margin-right: 5em;
    }
    .ele {
        border: 1px black solid;
    }

Refer this: https://www.youtube.com/watch?v=68O6eOGAGqA

Answered By - krishnkant jaiswal