How to break a list in multiple columns with Bootstrap 4?

Question

With Bootstrap 4, how can I have something like this:

[ 1 ] [ 4 ]
[ 2 ] [ 5 ]
[ 3 ] [ 6 ]

In other words, how to break a list into two equal columns, ordering it vertically, using only one <ul>? So I can have, for example, a dynamic number of items?

I could use column-width and column-count like this, but I was wondering if I can achieve the same effect with Bootstrap 4 grid system.

Answer 1

There's no way to do it with the Bootstrap "Grid". However, you can use Bootstrap's card-columns and set the column-count...

  <ul class="list-unstyled card-columns">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
  </ul>

https://www.codeply.com/go/suY2Ci62Ji