Bootstrap 5 List Groups – Learn with us

Bootstrap 5 – A Comprehensive Guide to Modern Web Development

About Lesson

In Bootstrap 5, list groups are used to display a collection of items in a structured and organized manner. They provide a way to present lists of content with various styling options. Here’s how you can create list groups in Bootstrap 5:

Basic List Group:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

Active and Disabled Items:

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item active">Item 2 (active)</li>
  <li class="list-group-item">Item 3</li>
  <li class="list-group-item disabled" aria-disabled="true">Item 4 (disabled)</li>
</ul>

List Group with Badges:

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 1
    <span class="badge bg-primary">5</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 2
    <span class="badge bg-success">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Item 3
    <span class="badge bg-danger">8</span>
  </li>
</ul>

List Group with Action Buttons:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Link 1</a>
  <a href="#" class="list-group-item list-group-item-action">Link 2</a>
  <a href="#" class="list-group-item list-group-item-action">Link 3</a>
</div>

List Group with Flush Style:

<ul class="list-group list-group-flush">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

You can customize the appearance of list groups by combining different classes and adding additional elements or styles as needed. List groups are flexible and can be used in various contexts, such as navigation menus, sidebars, or content lists.

Feel free to utilize list groups to present your content in a structured and visually appealing manner. For more details and additional options related to list groups in Bootstrap 5, refer to the official Bootstrap documentation.

Join the conversation