Menu
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>
501
Placing Ordered and Unordered List Items Inline. If you want to create a horizontal menu using the ordered or unordered list you need to place all list items in a single line (i.e. side by side). You can do this simply by adding the class . list-inline to the <ul> or <ol> , and the class .
My suggestion is better use ul and li to make a list. And you can use list-style-type: square; on ul element to change the style of list item. I just used inline CSS here, you may add the style into your css file. For your reference, here is the HTML-List and list-style-type definition and usage.
Horizontal List Groups. If you want the list items to display horizontally instead of vertically (side by side instead of on top of each other), add the . list-group-horizontal class to .
The most basic list group is an unordered list with list items: First item. Second item. Third item.
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
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
