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

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.

csslistbootstrap-4


Solution 1:[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

Solution 2:[2]

Example with column-count:

<ul class="list-unstyled card-columns" style="column-count: 2;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Solution 3:[3]

Try using flex as I did:

<div class="d-flex flex-row">
  <div class="d-flex flex-column">
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
  </div>
  <div class="d-flex flex-column">
    <div class="p-2">Flex item 1</div>
    <div class="p-2">Flex item 2</div>
    <div class="p-2">Flex item 3</div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zim
Solution 2 General Grievance
Solution 3 Rarblack

Related Questions