1

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 ?

Here's how it currently looks

enter image description here

<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.google.com" itemprop="url">
    <span itemprop="title">John</span>
  </a> >
</div>  
</li>

<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.yahoo.com" itemprop="url">
    <span itemprop="title">Jane</span>
  </a> >
</div> 
</li>

<li> 
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.msn.com" itemprop="url">
    <span itemprop="title">David</span>
  </a>
</div>
</ul>
</li>
James L.
  • 1,083
  • 20
  • 47
  • possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Bram Vanroy Feb 06 '15 at 11:47

3 Answers3

2

You can override the base css and add a negative margin to the li elements like so:

.list-inline>li {
    margin-right: -10px;
}

Run the below code snippet to see what this produces.

.list-inline>li {
 margin-right: -10px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul class="list-inline">
<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.google.com" itemprop="url">
    <span itemprop="title">John</span>
  </a> >
</div>  
</li>

<li>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.yahoo.com" itemprop="url">
    <span itemprop="title">Jane</span>
  </a> >
</div> 
</li>

<li> 
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="www.msn.com" itemprop="url">
    <span itemprop="title">David</span>
  </a>
</div>
</li>
  </ul>
Tanner
  • 20,318
  • 9
  • 56
  • 73
0

One of the options is to remove the padding from elements with css.

.no-left-gutter{padding-left:0;}

And add this class to li or a elements.

<li class="no-left-gutter">
  <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.google.com" itemprop="url" class=no-left-gutter>
      <span itemprop="title">John</span>
    </a> 
  </div>  
</li>
Maky
  • 501
  • 5
  • 17
-1

can be fixed by funky code formatting...

<ul class="list-inline">
  <li>
   List Item One</li><li>
   List Item Two</li><li>
   List Item Three</li>
</ul>

can be fixed by adding html comments...

<ul class="list-inline">
  <li>List Item One</li><!--
  --><li>List Item Two</li><!--
  --><li>List Item Three</li>
</ul>
executable
  • 2,788
  • 3
  • 16
  • 39
Nure Alam
  • 24
  • 1