Bootstrap, foreach in view - html

Question

I have a little problem. I have some products in shop ( I don't know how many products there will be ). In the main site I would like to print only 3 products in one row. And I don't know how to do loop to work this. Now in my code I have only one row and I doesn't look nice. I designed my row t contain only 3 products.
<div class="row-fluid">
<ul class="thumbnails">
#if (count($subcategoryProducts)==0)
There's no products
#else
#foreach($subcategoryProducts as $product)
<li class="span4">
<div class="thumbnail">
<a class="zoomTool" href="/product/{{$product->id}}" title="add to cart"><span
class="icon-search"></span> Details</a>
<a href="/product/{{$product->id}}"><img src="{{$product->getImageURL()}}"
alt=""></a>
<div class="caption cntr">
<p>{{$product->name}}</p>
<p><strong> {{$product->price}}</strong></p>
<h4><a class="shopBtn" href="#/{{$product->id}}" title="add to cart"> Add to cart </a>
</h4>
<br class="clr">
</div>
</div>
</li>
#endforeach
#endif
</ul>
</div>
Where's my mistake? Shoul I put this loop in another maybe?

Answer 1

Approach 2 here by JERRIE PELSER was the answer to my prayers today.
Use a simple extension method
public static class ArrayExtensions
{
/// <summary>
/// Splits an array into several smaller arrays.
/// </summary>
/// <typeparam name="T">The type of the array.</typeparam>
/// <param name="array">The array to split.</param>
/// <param name="size">The size of the smaller arrays.</param>
/// <returns>An array containing smaller arrays.</returns>
public static IEnumerable<IEnumerable<T>> Split<T>(this T[] array, int size)
{
for (var i = 0; i < (float)array.Length / size; i++)
{
yield return array.Skip(i * size).Take(size);
}
}
}
Use the extension method in foreach to split the rows by the number of columns required
#model IEnumerable<BootstrapGridLayout.Models.Article>
#using BootstrapGridLayout;
#{
ViewBag.Title = "Home Page";
}
#foreach (var row in Model.ToArray().Split(3))
{
<div class="row">
#foreach (var article in row)
{
<div class="col-md-4">
<div class="thumbnail">
<img src="#article.Thumbnail" data-holder-rendered="true" style="height: 200px; width: 100%; display: block;">
<div class="caption">
<h3 id="thumbnail-label">#article.Name</h3>
<p>#article.Description</p>
</div>
</div>
</div>
}
</div>
}