bootstrap list group
<!-- Bootstrap 5 List-group --> <ul class="list-group"> <li class="list-group-item active" aria-current="true">An active 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">A fourth item</li> <li class="list-group-item">And a fifth one</li> </ul> <!-- With badges --> <ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center" > A list item <span class="badge bg-primary rounded-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center" > A second list item <span class="badge bg-primary rounded-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center" > A third list item <span class="badge bg-primary rounded-pill">1</span> </li> </ul>