How to declare a list with bootstrap? - css

Question

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 ?

Answer 1

From my stand, the best way to display an Unordered LIST with hypertext markup is :
<ul>
<li>
So, you can try a list of ul>li setting your <li> width to 25%, float-left.
Your 5th element is supposed to stack bottom left.
If you still want to use bootstrap grid system, just put your 'items' inside the same row.
<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 class="col-md-3">item 5</div>
<div class="col-md-3">item 6</div>
<div class="col-md-3">item 7</div>
</div>
The overflowed elements will be stack bottom left.
So give it a try:
<ul class="row">
<li class="col-md-3">item 1</li>

Answer 2

You could use a UL list..
<ul class="list-unstyled">
<li class="col-md-3">item 1</li>
<li class="col-md-3">item 2</li>
<li class="col-md-3">item 3</li>
<li class="col-md-3">item 4</li>
<li class="col-md-3">item 5</li>
<li class="col-md-3">item 6</li>
<li class="col-md-3">item 7</li>
</ul>
Demo: http://bootply.com/91825
However, you'd need to change this markup if you decide to make things wider.

Answer 3

1.You can always change the default 12 space grid to whatever you prefer by setting #gridColumns to your preference in this page or overriding the css.less if you prefer.
2.With Bootstrap you can use the custom class inline to build your list:
<ul class="inline">
<li>...</li>
</ul>
3.But as Milche refered col-md-3 will do the trick if you stick to one row. I think I would use a tag though, to make clear it's inline.