Bootstrap: list-inline with bullets?

Question

Anybody knows, how to add bullets/separators between elements in horizontal list in Bootstrap 3?

<ul class="list-inline">
   <li>Author: Michal</li>
   <li>Modified: 17.08.2014</li>
   <li>Comments: 5</li>
</ul>

Gandzha

Answer 1

Thy this CSS:

.list-inline{display:block;}
.list-inline li{display:inline-block;}
.list-inline li:after{content:'|'; margin:0 10px;}

you can see fiddle here.

Needless to say you can use anything you want instead of a pipe separator, this is just an example

Determinable

Thanks! It works, but how to remove bullet from last element? – Emilio

.list-inline li:last-child:after {content: '';} – Cavie

what about list-style properties ? – Peart

Or you could do this: .list-inline li:not(:last-child):after{content:'\2022'; margin:0 10px;} – Heedful

Answer 2

You could use •

<ul class="list-inline">
   <li>&bull; Author: Michal</li>
   <li>&bull; Modified: 17.08.2014</li>
   <li>&bull; Comments: 5</li>
</ul>

Or you could use icons like Font Awesome, a bullet icon would be <i class="fa fa-circle"></i>

Lannielanning

Answer 3

Here is an scss version for a variation on bootstrap 3's .list-inline I've named .list-inline-separated (using bullets):

.list-inline-separated {
  @extend .list-inline;

  li {
    // adjust leading spacing for each additional item
    margin-left: -10px;

    &:first-child {

      // no leading spacing for initial item
      margin-left: 0px;
    }

    &:after {
      content: '\2022'; // bullet
      margin: 0 5px;
    }

    // no bullet on last
    &:last-child:after {
      content: '';
    }
  }
}

So far so good...

Resolvent