I'm using bootstrap
and I need to implement a list of items to be displayed over many columns.
Bootstrap uses a grid that is 12 cells wide. My item being 3 cells wide (that's how I roll), it means that a row holds only 4 items.
item 1 | item 2 | item 3 | item 4
item 5
My item
is not a simple text but a "card" :
The code can be found there.
The straightforward way to write this would be:
<div class="row">
<div class="col-md-3">[item 1]</div>
<div class="col-md-3">[item 2]</div>
<div class="col-md-3">[item 3]</div>
<div class="col-md-3">[item 4]</div>
</div>
<div class="row">
<div class="col-md-3">[item 5]</div>
</div>
But it feels non semantic. The fact that my items are displayed on many rows is truly pertaining to presentation choices.
Besides, if I now decide that my items should be wider, I have to change the structure of my document (as opposed to class attributes).
Besides that way of doing things is even more artificial on a mobile screen were all my items are displayed on top of each other.
Is there another way to write my list? A more 'semantic' way ?