Generating bootstrap grid with Foreach loop

Question

I'm really close to getting this accomplished. I'm trying to get 3 images across each row. The first row only has 1 image, though, then the rest have 3 across. I'm not sure why the first row has only 1 image. Here's my code:

        <div class="row">
        @{ var counter = 0; }

        @foreach (var x in portifolioImages)
        {
            <div class="col-sm-4">
                <a href="#"><img src="@x.UmbracoFile" alt="@x.imageTitle" style="margin:0 auto;" />
                    <p class="folioTitle">@x.imageClient <br /><span style="color:#00bfff; font-weight: bold; text-transform: uppercase; font-size:15px;">Learn More</span></p>
                </a>  
            </div>
            if (counter % 3 == 0)
            {
                @:</div><div class="row">
            counter = 0;
            }
            counter++;
        }
    </div>

remove this part if (counter % 3 == 0) { @:</div><div class="row"> counter = 0; } counter++; and then check — rashfmnb
– rashfmnb, Commented Apr 15, 2016 at 18:18
if you want 3 images a row, why counter, boostrap grid will do it for you, col-*-4 means 33.3% width means each row divides equally into 3 so simple <div class="row"> foreach { <div class="col-sm-4"> images </div> } endforeach</div> should do the job — Shehary
– Shehary, Commented Apr 15, 2016 at 18:39
So despite it all being in one big row class i would still get a grid? Thanks i'll keep that in mind — Christopher Northcutt
– Christopher Northcutt, Commented Apr 15, 2016 at 18:46

Mogzol · Accepted Answer · 2016-04-15 18:25:19Z

1

Your counter starts at 0. The if (counter % 3 == 0) statement will be true when counter is 0, so your first row is only going to have 1 element. Start your counter at 1 instead of 0 and it should work.

Also, the reason it works fine after the first row is because you reset the counter to 0, but then immediately increment it to 1. So your first row is starting with counter at 0, but all the following rows start with counter at 1.

answered Apr 15, 2016 at 18:25

Mogzol

1,4151 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

juharr Over a year ago

Should be noted that resetting the counter to 0 isn't necessary.

Christopher Northcutt Over a year ago

Tried this and the first row had 2 images, then the 2nd had just 1 images. The rest had 3 images.

Mogzol Over a year ago

@ChristopherNorthcutt And the only line you changed was @{ var counter = 0; } to @{ var counter = 1; }?

Christopher Northcutt Over a year ago

Yes but then i realized it was something in the CSS that was causing it to screw up again. I got it! Thanks so much

Rajat D Naik · Accepted Answer · 2020-04-07 06:04:42Z

0

should have just moved counter++ before the if statement.

answered Apr 7, 2020 at 6:04

Rajat D Naik

1

Collectives™ on Stack Overflow

Generating bootstrap grid with Foreach loop

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related