Bootstrap horizontal stacking of list-group

Question

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.

Answer 1

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.

Answer 2

Just change your class list-group to list-inline. Everything else stays the exact same.

Answer 3

For Bootstrap 4, replace list-group with d-flex flex-wrap.

https://jsfiddle.net/rd5my6hf/