Create new row div for every 4 items

Oct 7, 2014 at 11:06 PM
I know this is a common one. And I even had code that I thought worked. But I am using Bootstrap and I would like to create a new < div class="row" > every 4 items (each item is < div class="col-sm-3" >)

I have some code but it breaks (the div doesn't close) when the last row doesn't have all 4 items.

@{
    int rowCounter = 1;
    var rowsPerDiv = 4;
}
<div id="staff">



@foreach (var e in List)
{
    var Content = e.Content;
    
    if(rowCounter % rowsPerDiv == 1) {
    @:<div class="row">
    }
    
    <div class="col-sm-3">
    <div class="staff-member">
        <div class="sc-element text-center">
        @Content.Toolbar
        <h5>@Content.Title</h5>
        
        </div> <!-- close .sc-element.text-center -->
    
        <img src="@Content.Image?w=160&h=120&mode=crop&anchor=topcenter" alt="Photo of @Content.Title" class="img-responsive" />
        
    
        
    </div><!-- close .staff-member -->
    </div><!-- close .col-sm-3 -->

    if(rowCounter % rowsPerDiv == 0) {
    @:</div> <!-- close the .row -->
    }
    
rowCounter = rowCounter + 1;    
    
} 

</div> <!-- close #staff -->


How do I do this properly?
Oct 8, 2014 at 6:56 AM
Edited Oct 8, 2014 at 7:08 AM
Perhaps i'm missunderstanding the problem here, but why to set a 'row' for each row?
<div class=row>
@foreach (var e in List)
{
    var Content = e.Content;

//2 in a row for phone 3 for tablet 4 for mid-size and above
    
    <div class="col-xs-6 col-sm-4 col-md-3">
    
        
        <h5>@Content.Title</h5>
         
        <img src="@Content.Image?w=160&h=120&mode=crop&anchor=topcenter" alt="Photo of @Content.Title" class="img-responsive" />      
           
    </div>


  }

</div>

<div class=row>

//other content

</div>
code not tested. i just edit yours here. bootstrap should auto stack each content div.
at the end of your foreach, if other content follow, you could set a new row class to start further content in a new 'line'.
Oct 8, 2014 at 10:34 AM
I have a code sample here for 3 columns

https://sexycontent.codeplex.com/discussions/565198
Oct 8, 2014 at 7:09 PM
Nokiko: always here to save the day. Thanks a ton.

@Collective - You should wrap each row in div class="row" in Bootstrap. Also important for equalHeight.js.
Oct 10, 2014 at 10:53 AM
Image