Bootstrap Grid with MVC.

the wrong approach is to use for loop and use a counter to check if counter is 4 then create a new row.

But the ultimate solution is to create an extension method to split list into chunks of 4 object so that you do not have to do anything in view.

public static class ArrayExtensions
{
public static IEnumerable> Split(this T[] array, int size)
{
for (var i = 0; i < (float)array.Length / size; i++)
{
yield return array.Skip(i * size).Take(size);
}
}
}
@model IEnumerable
@using BootstrapGridLayout;
@{
ViewBag.Title = "Home Page";
}
@foreach (var row in Model.ToArray().Split(4))
{
class="row">
@foreach (var article in row)
{
class="col-md-3">
class="thumbnail">
"@article.Thumbnail" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
class="caption">
"thumbnail-label">@article.Name
@article.Description

2 Replies

Know the answer? Post it — somebody with the same question will find it here.