Bootstrap: list-string with bullets?

Question

Does anyone know how to add bullets / separators between items in a horizontal list in Bootstrap 3?

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

Answer 1

Here is this CSS:

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

you can see the violin here .

Needless to say, you can use whatever you want instead of the channel separator, this is just an example

Answer 2

You can 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 can use icons like the awesome font , the bullet icon will be <i class="fa fa-circle"></i>

Answer 3

Here is the scss version for the boot option on bootstrap 3 .list-inline I 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 ...