insert dynamic 6 images into 2 lines via bootstrap

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>
}