Menu
How can I make this look as a horizontal one line/row list seperated as vertical columns (instead of a set of rows with one column, as below) http://getbootstrap.com/components/#list-group-basic
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Does it make sense to make use of http://getbootstrap.com/components/#with-button-elements in this case? Or should http://getbootstrap.com/components/#nav-disabled-links be used instead? I need the border seperation similar to list-group/list-group-item.
555
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 .
Add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element.
The most basic list group is an unordered list with list items: First item. Second item. Third item.
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 .
You can set float: left to your li elements to make it horizontal in one line.
ul.list-group:after {
clear: both;
display: block;
content: "";
}
.list-group-item {
float: left;
}
Fiddle
Also from your given code I believe you don't need to make use of the #with-button-elements and #nav-disabled-links. The above example will do just fine.
168
Just change your class list-group to list-inline. Everything else stays the exact same.
27
For Bootstrap 4, replace list-group with d-flex flex-wrap.
https://jsfiddle.net/rd5my6hf/
10
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
