← all Bootstrap classes list

Bootstrap class: .list-group with badges

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Preview

  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

More in Bootstrap List Group

Bootstrap 4 & 5
Tailwind