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.
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>
}
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:
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?
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:
}
Awesome! Weeded out what I didn't need and it works perfectly!
Thanks a bunch!
No prob!
is working on a reply...