CODEWITHSUNDEEP
htmlcssjsptwitter-bootstrap-3
Jack
Jack

Reputation: 6620

How to divide a group of items into three columns using Bootstrap?

I have a list of items that need to show in maximum of 3 columns. The issue is when I try to print them using a for loop it put them all in one column. How to put them in a separate column once they reach to a certain number.

Lets say, I have 99 items, 99/3 would be 33 so I would need to have 33 items per column. I tried to change the height of column which is 1px but could not solve it.

<div class="col-md-3">
    <c:forEach var="items" items="${Items}">
        ${item}
        <br />
    </c:forEach>
</div>

Current Output

item1
...
item99

Desired Output

 item1     item34    item67
   ...       ...       ...
   item33    item67    item99

Upvotes: 2

Views: 2180

Answers (2)

Manikanta Reddy
Manikanta Reddy

Reputation: 857

You are iterating in between the div with col-md-3 so it is in one column. Try this

<c:forEach var="items" items="${Items}" varStatus="status">
    <div class="col-md-4">
        ${item}
    </div>
    <c:if test="${(status.index) % 3 == 0}">
        <div class="clearfix"></div>
    </c:if>
</c:forEach>

Upvotes: 3

Steve
Steve

Reputation: 9571

Pseudo code answer, full disclosure this is off the top of my head and hasn't been tested, but it hopefully gives you the idea.

var itemsPerColumn = totalItems / numberOfColumns (ie. 99/3 = 33)
var currentItem = 0;

<div class="col-md-3">
foreach item
    if currentItem % itemsPerColumn = 0 // current item divides into items per column with no remainder, so it's 33, 66, 99 etc
        </div>
        <div class="col-md-3">
    end if
    ${item}
end foreach
</div>

Upvotes: 0

Related Questions