insert dynamic 6 images into 2 lines via bootstrap - html

Question

i try without luck to insert 6 images into 2 lines,
the problem is that the line number 2 break the last 2 images and push them down.
i'm using Umbraco and bootstrap 3.
here is my code
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "InnerPage.cshtml";
}
#section slider
{
#{Html.RenderPartial("ImageSlider");}
}
#{
<!-- PROGRAM PAGE -->
<script src="js/script.js"></script>
<div class="caption-button caption-gray left-top" style="font-size:14px;">UPCOMING EVENTS</div>
<div class="padding-top-60">
<div class="row row-lg-height">
<div id="eventCarousel" class="carousel slide vertical" >
<div class="carousel-inner">
#{
var content = Umbraco.Content(1122);
int itemsCount = content.Children.Count();
int sliders = itemsCount / 6;
for (int i = 0; i <= sliders; i++)
{
var items = content.Children;
if (i == 0)
{
#Html.Raw("<div class=\"item active\">")
items = content.Children.Take(6);
}
else
{
items = content.Children.Skip(i * 6).Take(6);
#Html.Raw("<div class=\"item\">")
}
foreach (var childContent in items)
{
var contentService = ApplicationContext.Current.Services.ContentService.GetById(int.Parse(childContent.Id.ToString()));
var title = childContent.Name.ToString();
var image = Umbraco.Media(contentService.Properties["Thumbnail"].Value.ToString());
var description = contentService.Properties["shortDescription"].Value.ToString();
var img = image.Url.ToString();
<div class="col-lg-4">
<img src="#image.Url" class="media-object pull-left img-responsive" />
<h1 class="media-heading" style="color:#606060;">#title</h1>
<div style="padding:0px 5px; ">#MvcHtmlString.Create(#description)</div>
</div>
}
#Html.Raw("</div>")
}
}
</div>
</div>
</div>
</div>
<a class="caption-button caption-red right-bottom" href="#eventCarousel" data-slide="next">MORE</a>
}
i attached 2 images so you can see what firebug showing to me and what happened on the screen.
PLEASE HELP ME ! I am breaking my head 2 days already and it's wasting my time..
What do i do wrong ??

Answer 1

I think your code is a littlebit difficult. If you use another approach you will be able to debug much easier.
Try some approach like this:
#{
var allNodesToLoop = Umbraco.Content(1122).Children;
}
#foreach(var nodegroup in allNodesToLoop.InGroupsOf(2) {
<div class="row">
#foreach(var item in nodegroup) {
<div class="col-md-4">
#item.Name
<!-- and other stuff you want to render in this grid cell -->
</div>
}
</div>
}