Overview of items in Bootstrap with asp.net mvc Razor

Question

I'm using bootstrap and showing a grid of items. I show 6 items a row.

Currently I'm having this code below, the code works but the smell of code is bad.

@{ int rowcnt = 0; }
@for (int i = 0; i < Model.Count; i++)
{  
    if (rowcnt % 6 == 0)
    {
        @Html.Raw("<div class=\"row\">")
    }

    <div class="col-md-2 col-xs-6 col-sm-6">
        <div class="myItemContainer">
            <!-- fancy item stuff -->
        </div>
  </div>
    rowcnt++;
    if (rowcnt % 6 == 0)
    {
        @Html.Raw("</div>")
    }
}
@*for-loop end*@
@if (rowcnt % 6 != 0)
{
    @Html.Raw("</div>")
}

Is there a better way to do this with bootstrap without having to count the rows to insert div's?

I tested to just create col- elements but that creates strange rows with only a single item sometimes in a row.

item item item item
item
item item item item
item
item item item item
item
...

hi can you please tell me what you excatly want to acheive ? — Yashveer Singh
– Yashveer Singh, Commented Jan 20, 2017 at 15:37
creating a grid with bootstrap with e.g. 6 items in a single row. Let's say I have 100 items, then I want to see 17 rows (16 rows with 6 items per row and an extra row with the remaining items). Currently it works but the code in razor looks horrible to add <div> elements myself. I was wondering if there was a better/cleaner way of doing this. — juFo
– juFo, Commented Jan 20, 2017 at 15:51
If you're just wanting raw HTML in your markup, simply write it without the Html.Raw helper. That's the beauty of Razor - you can mix the C# and HTML syntax up. — mason
– mason, Commented Jan 20, 2017 at 16:19
A more concise syntax - <div class"row">@for (int i = 0; i < Model.Count; i++){if (i > 0 && i % 6 == 0){@:</div><div class"row">}<div class="col-md-2 col-xs-6 col-sm-6">.....</div></div> — user3559349
– user3559349, Commented Jan 20, 2017 at 21:29
so the only real "option" is just to drop the bootstrap gridsystem and use flex.... :-) — juFo
– juFo, Commented Jan 23, 2017 at 8:23

Chris Pratt · Accepted Answer · 2017-01-20 16:29:15Z

0

If you actually want each set of six contained within a specific row, then no, there's no better way than what you have. However, it's not necessary to actually have separate rows. For example, it's perfectly valid to have something like:

<div class="row">
    <div class="col-md-2 col-xs-6 col-sm-6">Item 1</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 2</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 3</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 4</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 5</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 6</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 7</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 8</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 9</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 10</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 11</div>
    <div class="col-md-2 col-xs-6 col-sm-6">Item 12</div>
    <!-- etc -->
</div>

Each column div will take up the space it's supposed to and if it can't fit, it will simply wrap to the next line and start over. The only thing you may need to do additionally is add some custom bottom margins to the column divs, since the bottom margin that separates individual rows would no longer be there, obviously.

Technically, you were already doing this anyways, in smaller screen sizes. There, only two items would fit in a "row", but you still had six total items in each row div. As a result, the remaining 4 items were already wrapping to two additional lines on smaller screens within the same row div.

answered Jan 20, 2017 at 16:29

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

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

2 Comments

juFo Over a year ago

yes for smaller screensizes I see (code I copy/pasted and still had to remove). but the problem is that the remaining items don't fill up nicely. I have rows with only one item when I just have one "row".

Chris Pratt Over a year ago

That would be the case either way, would it not? The last column(s) will only take up part of the row, regardless of whether it's just wrapping to the next line or you have them wrapped in an actual div with class "row". Bootstrap columns do not automatically adjust based on whether there's leftover space in the row.

Collectives™ on Stack Overflow

Overview of items in Bootstrap with asp.net mvc Razor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related