Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Aspargeus 12 posts 102 karma points
    Aug 12, 2020 @ 13:32
    Aspargeus
    0

    Using foreach in conjunction with Bootstrap rows and columns

    Hi.

    I'm pretty new to Umbraco and Razor.

    I have a bunch of client logos in my content in the backoffice, which I retrieve and display on the website using a foreach loop as such:

        var selection = Umbraco.Content(Guid.Parse("23b25f71-a1ae-45f7-906c-e410794dba0b"))
    .ChildrenOfType("client")
    .Where(x => x.IsVisible());

    foreach (var item in selection) {
        ...
    }

    My problem is, that I'm using Bootstrap and want to display the first 4 logos with the class ".col-lg-3" inside a row and then start a new row with the next 4 logos and so on and so forth. So they all fit neatly in the Boostrap grid system.

    Is there any neat way of doing this?

    Copy Link
  • Amir Khan 1289 posts 2746 karma points
    Aug 12, 2020 @ 20:13
    Amir Khan
    100

    Basically a double foreach, the key part is ingroupsof, quick copy and paste from a blog loop, but this should point you in the right direction. There's some stuff in here related to pagination that you may not need:

    @{     
var i = 0;
foreach(var newsItemRow in selection.OrderBy("PostDate desc").Skip((page -1)* pageSize).Take(pageSize).InGroupsOf(3)) {
<div class="row">
    @foreach(var newsItem in newsItemRow) {
    <div class="post">@newsItem.Name</div>
    }   
</div>  
}

    }

    Copy Link
  • Aspargeus 12 posts 102 karma points
    Aug 13, 2020 @ 10:43
    Aspargeus
    0

    Awesome! Weeded out what I didn't need and it works perfectly!

    Thanks a bunch!

    Copy Link
  • Amir Khan 1289 posts 2746 karma points
    Aug 13, 2020 @ 11:41
    Amir Khan
    0

    No prob!

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies