title: How to add gap between list items in Bootstrap grid?
body: <p>I'm trying to make a two tiered horizontal list in bootstrap. It's like a secondary nav that will sit below the page header (so it won't be wrapped in nav tags).</p>
  
  <p>I'm trying to do it using a list, but am having trouble with the spacing. Since it needs to be 4 items wide (4 on top, 4 on bottom) I'm making each list-item into a col-md-3 (because 12/4 = 3).</p>
  
  <p>So far, I can get them to line-up horizontally but I can't figure out a way to get any separation between them without pushing the 4th item down to the next level. I've been using margin to get some space between them, but like I said, that only breaks it.</p>
  
  <p>Here's the code...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.secondary-nav-container {
  
      ul.list-group:after {
        clear: both;
        display: block;
        content: "";
  
      }
  
      .list-group-item {
          float: left;
          border-left: 0 none;
          border-right: 0 none;
          border-bottom: 0 none;
          margin: 0px;
          padding: 10px 0px;
  
      }
  
      a {
        //nothing here yet
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
  
  &lt;div class="secondary-nav-container container"&gt;
      &lt;div class="row"&gt;
          &lt;ul class="list-group"&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
            &lt;li class="col-xs-3 list-group-item"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The goal is to have two rows with 4 list-items in each that takes up the full width of the row, and stacks on top of each other. With spacing between each list-item so it doesn't look like there is just one giant horizontal line across the top of each row — there needs to be space between each list-items horizontal line at the top.</p>