Bootstrap: RFE: multi-column list-group in bootstrap 4

[WebDragon]

In this stackoverflow article, it is suggested to use the Grid Template in order to achieve a two column Layout of a UL in bootstrap 3, thusly:

<ul class="list-group row">
     <li class="list-group-item col-xs-6">Row1</li>
     <li class="list-group-item col-xs-6">Row2</li>
     <li class="list-group-item col-xs-6">Row3</li>
     <li class="list-group-item col-xs-6">Row4</li>
     <li class="list-group-item col-xs-6">Row5</li>
</ul>

In Bootstrap-4, this technique now fails when combined with .list-group, but still works with .list-unstyled or by simply using <ul class="row">, seeing as list-group is now handled with flexbox.

This issue having been raised in the past, and going forward likely will see at least some desired usage by designers, I would like to raise some discussion of possibilities, unless the team feels that this is best handled using "list-unstyled row" instead. (I myself recently used this, except with "list-group-item col-sm-6 col-xl-4" on a site built in BS4-beta)

I would like to update the stackoverflow article with the best technique for bootstrap 4-beta, but want to know which way the team would prefer to jump, before doing so.

[mdo]

No strong opinions on which direction you should go with.

[xj25vm]

I am hitting the same problem. Does this mean that we can't use the various styling advantages of .list-group, if we are creating a multi-column list?

[tadasv]

@xj25vm I came across the same stack overflow question. I decided to treat li as row. Here's an example

<ul class="list-group">
  <li class="list-group-item row d-flex">
    <div class="col-4">Name</div>
    <div class="col-8">Email</div>
  </li>
</ul>

[randaller]

For Bootstrap 4:

<div class="container">
<ul class="list-unstyled row">
<li class="list-item col-sm-6">row1</li>
<li class="list-item col-sm-6">row2</li>
<li class="list-item col-sm-6">row1</li>
<li class="list-item col-sm-6">row2</li>
</ul>
</div>