Bootstrap 5 — List Groups Customization

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize list groups with Bootstrap 5.

Contextual Classes and List Group Actions

We can add styling classes to list group actions.

For example, we can write:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">no style</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">primary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">secondary</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">success</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">danger</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">warning</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">info</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">light</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">dark</a>
</div>

We have the list-group-item-action in each list group item and the list-group-item-primary classes to style them.

List Group Items With Badges

We can add list group items with badges.

For instance, we can write:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge bg-primary rounded-pill">22</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Lorem ipsum dolor sit amet
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    consectetur adipiscing elit
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

We add the badge to the right of the text by adding a span with the badge class.

rounded-pill make them more rounded than the default style.

Custom Content

Also, we can add any content we want.

The layout can be added with Bootstrap 5’s flexbox utility classes.

For example, we can write:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">item</h5>
      <small>10 days ago</small>
    </div>
    <p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <small>Donec id elit non mi porta.</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">item</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Vestibulum mauris mauris, faucibus in bibendum at, commodo nec nulla. </p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>

  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">item</h5>
      <small class="text-muted">2 days ago</small>
    </div>
    <p class="mb-1">Fusce mi mi, viverra quis vehicula a, bibendum eu magna. </p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

We put content in a tags and lay them out with the d-flex , w-100 , and justify-content-between classes.

d-flex makes the container display with a flexbox layout.

w-100 makes the content 100% wide.

justify-content-between put the items on the 2 ends of the container.

Checkboxes and Radios

Checkboxes and radio buttons can be added easily with the input element and classes the come with Bootstrap 5.

For example, we can write:

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Proin non libero congue lectus pharetra dictum quis ut eros
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Nunc ac eleifend risus.
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    In vitae arcu tincidunt, eleifend velit id
  </li>
  <li class="list-group-item">
    <input class="form-check-input mr-1" type="checkbox" value="">
    Vestibulum at eros
  </li>
</ul>

We added checkboxes and spaced them out with the mr-1 class to add some margins on the right.

Conclusion

We can add list groups with various styles and various layouts.

Checkboxes can also be added.