title: Reduce spacing between booststrap list-inline elements
body: <p>I'm using bootstrap list-inline class to style my breadcrumbs but I don't like the spacing between the elements. How do I reduce the spacing between John, Jane and David ?</p>
  
  <p>Here's how it currently looks</p>
  
  <p><img src="https://i.stack.imgur.com/XHGEm.png" alt="enter image description here"></p>
  
  <pre><code>&lt;ul class="list-inline"&gt;
  &lt;li&gt;
  &lt;div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"&gt;
    &lt;a href="http://www.google.com" itemprop="url"&gt;
      &lt;span itemprop="title"&gt;John&lt;/span&gt;
    &lt;/a&gt; &gt;
  &lt;/div&gt;  
  &lt;/li&gt;
  
  &lt;li&gt;
  &lt;div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"&gt;
    &lt;a href="www.yahoo.com" itemprop="url"&gt;
      &lt;span itemprop="title"&gt;Jane&lt;/span&gt;
    &lt;/a&gt; &gt;
  &lt;/div&gt; 
  &lt;/li&gt;
  
  &lt;li&gt; 
  &lt;div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"&gt;
    &lt;a href="www.msn.com" itemprop="url"&gt;
      &lt;span itemprop="title"&gt;David&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>