title: full width list items grid bootstrap 3
body: <p>I'm using the latest version of <a href="http://getbootstrap.com/css/" rel="nofollow noreferrer">Twitter Bootstrap</a>.</p>
  
  <p>I have the following markup: </p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;ul id="grid"&gt;
        &lt;li class="mix dogs col-sm-3"&gt;&lt;img src="http://placehold.it/300x200" alt="..."&gt;&lt;/li&gt;
        &lt;li class="mix cats col-sm-3"&gt;&lt;img src="http://placehold.it/300x200" alt="..."&gt;&lt;/li&gt;
        &lt;li class="mix krakens col-sm-3"&gt;&lt;img src="http://placehold.it/300x200" alt="..."&gt;&lt;/li&gt;
        &lt;li class="mix dogs cats col-sm-3"&gt;&lt;img src="http://placehold.it/300x200" alt="..."&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the output is not quite what I'm expecting, it adds a horizontal scrollbar and also the spacing is not equal on on the first item and last item.</p>
  
  <p>Here is a screenshot:
  <img src="https://i.stack.imgur.com/sRHxY.png" alt="enter image description here"></p>
  
  <p>I want to have this output: 
  <img src="https://i.stack.imgur.com/b6OFW.png" alt="enter image description here"></p>
  
  <p>Is it possible with the actual grid system to remove the gutters between list items and make them fill the width of the browser ?</p>