Bootstrap wrap list element into 3 row

Question

I would like to wrap a list elements into 3 column using one <ul>

Just to clarify what I want:

<ul class="list-group list-group-flush row-cols-3">
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
    <li class="list-group-item">Lorem Ipsum</li>
</ul>

I tried using row-cols-3 but it does not working.

This is how it looks right now:

UPDATE

#1

#2

#3

You want the list to have three rows? Does the fourth row start a new column, or just disappear? — David Thomas, Dec 17 '22 at 22:59
I want, the first to be at (1;1), the second be at (1;2), the third be at (1;3), the fourth be at (2;1), fifth be at (2;2), where (row; column) — lali97, Dec 17 '22 at 23:04
Almost, good but there is some problem with the lines, I added a UPDATE picture to my code. — lali97, Dec 17 '22 at 23:16
with the newer one, this is even worser, each li is in the same row, UPDATE pic #2 — lali97, Dec 17 '22 at 23:21
try giving `row` class to `ul` and `col-4` class to each `li` — burkay, Dec 17 '22 at 23:43
Ok, found another solution. Will post it in an answer shortly. — burkay, Dec 18 '22 at 00:07
@burkay I have just posted the correct soltution, but if you have a better one show me — lali97, Dec 18 '22 at 00:10

burkay · Answer 1 · 2022-12-18T00:14:12.083

Here is a solution thanks to https://getbootstrap.com/docs/5.0/components/list-group/#horizontal and @fabio.sang's comment at How to specify an element after which to wrap in css flexbox? . Added some more li items for testing purposes.

li {
  flex-basis: 33%;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<ul class="list-group list-group-horizontal flex-wrap">
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">Lorem Ipsum</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

that CSS is not necessary , bootstrap has those classes – dippas Dec 18 '22 at 00:12 — dippas, Dec 18 '22 at 00:12

score 0 · Answer 2 · answered Dec 18 '22 at 00:08

This way the border and the rows and columns will be perfect.

<ul class="list-group list-group-horizontal row">
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
  <li class="list-group-item col-4 border-0 border-bottom">Lorem Ipsum</li>
</ul>

Bootstrap wrap list element into 3 row

2 Answers2