3

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" : enter image description here

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 ?

1
  • What are your "items"? Show some actual code, please, or explain better why this isn't right for your scenario.
    – isherwood
    Commented Nov 4, 2013 at 21:01

3 Answers 3

4

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>
1
3

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.

0
1

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.

1
  • inline works also. It adds a light margin between the items, and the col-md-3 class seems not necessary on the li. Commented Nov 4, 2013 at 21:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.