title: How to declare a list with bootstrap?
body: <p>I'm using <code>bootstrap</code> and I need to implement a list of items to be displayed over many columns.</p>
  
  <p>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.</p>
  
  <pre><code>item 1 | item 2 | item 3 | item 4 
  item 5 
  </code></pre>
  
  <p>My <code>item</code> is not a simple text but a "card" : <img src="https://i.stack.imgur.com/4ABze.png" alt="enter image description here"></p>
  
  <p>The code can be <a href="http://bootsnipp.com/snippets/featured/user-profile-widget" rel="nofollow noreferrer">found there</a>.</p>
  
  <p>The straightforward way to write this would be:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;[item 1]&lt;/div&gt;
      &lt;div class="col-md-3"&gt;[item 2]&lt;/div&gt;
      &lt;div class="col-md-3"&gt;[item 3]&lt;/div&gt;
      &lt;div class="col-md-3"&gt;[item 4]&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;[item 5]&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it feels non semantic. 
  The fact that my items are displayed on many rows is truly pertaining to presentation choices.</p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>Is there another way to write my list? A more 'semantic' way ? </p>