Two columns in a row in ASP.NET MVC

Question

I want to iterate two columns in a row ...

@Html.Partial("_MediumProductWrap", product)

is a column

@foreach (var product in Model.Products)
{
    <div class="row">
        @Html.Partial("_MediumProductWrap", product) // Col
    </div>
}

It should work if you put the "row" div outside the foreach loop. Then make sure that your partial has a class of col-6, which will cause them to appear as two columns (presuming that you're using bootstrap). — Sam Walpole
– Sam Walpole, Commented Jan 8, 2020 at 17:09
if i put row outside loop it put 10 col in a row.because loop count is 10 — Owaix Ansari
– Owaix Ansari, Commented Jan 8, 2020 at 17:10
That's why you need to add the col-6 class to the partial. Please see the following to understand how the Bootstrap grid system works: getbootstrap.com/docs/4.1/layout/grid — Sam Walpole
– Sam Walpole, Commented Jan 8, 2020 at 17:15

Sam Walpole · Accepted Answer · 2020-01-08 17:31:14Z

2

Please try the following:

<div class="flex">
  <div class="row">
    @foreach (var product in Model.Products)
    {
      <div class="col-6">
        @Html.Partial("_MediumProductWrap", product) // Col
      </div>
    }
  </div>
</div>

The bootstrap grid system uses a 12 column grid, so setting the div around your partial to have col-6 will make the products display as a grid with 2 columns.

edited Jan 8, 2020 at 17:31

answered Jan 8, 2020 at 17:21

Sam Walpole

1,20413 silver badges26 bronze badges

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

1 Comment

Sam Walpole Over a year ago

Sorry, I missed the flex wrapper div around the whole thing. Please see my updated answer. Working fiddle: jsfiddle.net/t1ya8nfc

Collectives™ on Stack Overflow

Two columns in a row in ASP.NET MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related