Bootstrap 5.3 List Group: Create Interactive and Stylish Lists in Your Web Applications

In Bootstrap 5.3, the "List Group" component allows you to create interactive and visually appealing lists in your web applications. List groups are useful for displaying a collection of related items, such as products, user profiles, or navigation links, in a structured and organized manner.

To use the List Group component in Bootstrap 5.3, follow these steps:

Set up the basic structure:

Start by creating a container element, such as a <div>, to wrap the List Group component. Inside the container, create an unordered list ( <ul>) element with the class "list-group".

Add list items:

Inside the <ul> element, add individual list items (<li>) with the class "list-group-item". Customize the content and styling of each list item based on your specific requirements.

Customize the appearance:

Bootstrap provides additional classes to customize the appearance of list items within a list group. You can use classes such as "active", "disabled", "list-group-item-{variant}", or "list-group-item-action" to change the color, style, or behavior of list items.

Here's an example of how to create a List Group:

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

You can customize the appearance and behavior of list items further by applying additional classes. For example, you can add the "active" class to indicate the currently selected item or the "disabled" class to make an item non-clickable.

Bootstrap 5.3 also provides options for styling nested list groups, adding contextual variants, or including additional content within list items, such as badges, images, or buttons. Refer to the Bootstrap documentation for more details on these advanced features and how to use them.

With the List Group component in Bootstrap 5.3, you can create well-structured and visually appealing lists in your web applications, improving the readability and user experience of your content.

List Group With Anchor in Bootstrap

To create a List Group with anchor links in Bootstrap 5.3, you can use the "list-group" and "list-group-item" classes in combination with anchor tags (<a>) to build a navigational list. Each anchor link represents an item in the list group and can be customized with additional classes or attributes.

Here's an example of a List Group with anchor links:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">Item</a>
    <a href="#" class="list-group-item list-group-item-action">Item</a>
    <a href="#" class="list-group-item list-group-item-action">Item</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Item</a>
    <a href="#" class="list-group-item list-group-item-action">Item</a>
</div>

In this example, we have a List Group containing three list items represented by anchor links. Each anchor link has the classes "list-group-item" and "list-group-item-action". The "list-group-item" class styles the item as a list group item, while the "list-group-item-action" class adds interactivity, such as hover effects and clickability.

By leveraging the List Group and anchor tags in Bootstrap 5.3, you can easily create navigational lists with clickable items in your web applications, improving user navigation and interactivity.

List Group With Button in Bootstrap

To create a List Group with buttons in Bootstrap 5.3, you can combine the "list-group" and "list-group-item" classes with button elements (<button>) to build a list of actionable items. Each button represents an item in the list group and can be customized with additional classes or attributes.

Here's an example of a List Group with buttons in Bootstrap 5.3:

<div class="list-group">
    <button class="list-group-item list-group-item-action active">Item</button>
    <button class="list-group-item list-group-item-action">Item</button>
    <button class="list-group-item list-group-item-action">Item</button>
    <button class="list-group-item list-group-item-action disabled">Item</button>
    <button class="list-group-item list-group-item-action">Item</button>
</div>

In this example, we have a List Group containing three list items represented by button elements. Each button has the classes "list-group-item" and "list-group-item-action". The "list-group-item" class styles the item as a list group item, while the "list-group-item-action" class adds interactivity, such as hover effects and clickability.

List Group With Flush in Bootstrap

Here's an example of a List Group with buttons in Bootstrap 5.3:

<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>
    <li class="list-group-item">Item-4</li>
    <li class="list-group-item">Item-5</li>
</ul>

In this example, we have a List Group with three list items represented by anchor links. The parent container has the classes "list-group" and "list-group-flush". The "list-group" class is necessary to apply the basic List Group styling, while the "list-group-flush" class removes the outer borders and rounded corners, creating a flush appearance.

You can customize the List Group further by adding additional classes or attributes to the list items, such as the "active" class to highlight the currently selected item.

List Group With Numbered in Bootstrap

Add the .list-group-numbered modifier class to opt into numbered list group items. Numbers are generated via CSS for better placement inside list group items and to allow for better customization.

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

List Group Custom in Bootstrap

In Bootstrap, you can create a horizontal List Group by using the flexbox utilities provided by Bootstrap. This allows you to display the list items in a horizontal layout instead of the default vertical arrangement.

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

the List Group is contained within a <div> element with the "d-flex" class, which enables the flexbox layout. The List Group itself has the additional class "list-group-horizontal" to define its horizontal orientation.

Each list item (<li>) has the "list-group-item" class for the List Group styling, and the "flex-fill" class to ensure horizontal distribution within the available space.

You can further customize the horizontal List Group by applying additional classes or custom CSS styles to the container, list items, or the List Group itself. This allows you to adjust the spacing, alignment, or appearance according to your specific design requirements.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>List Group</title>
    <link rel="stylesheet" href="../css/base.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <p class="fw-semibold text-primary my-3">List Group in Bootstrap</p>

          <ul class="list-group">
            <li class="list-group-item active">Item-1</li>
            <li class="list-group-item">Item-2</li>
            <li class="list-group-item">Item-3</li>
            <li class="list-group-item disabled">Item-4</li>
            <li class="list-group-item">Item-5</li>
          </ul>
          <p class="fw-semibold text-primary my-3">List Group With Anchor in Bootstrap</p>

          <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active">Item</a>
            <a href="#" class="list-group-item list-group-item-action">Item</a>
            <a href="#" class="list-group-item list-group-item-action">Item</a>
            <a href="#" class="list-group-item list-group-item-action disabled">Item</a>
            <a href="#" class="list-group-item list-group-item-action">Item</a>
          </div>

          <p class="fw-semibold text-primary my-3">List Group With Button in Bootstrap</p>

          <div class="list-group">
            <button class="list-group-item list-group-item-action active">Item</button>
            <button class="list-group-item list-group-item-action">Item</button>
            <button class="list-group-item list-group-item-action">Item</button>
            <button class="list-group-item list-group-item-action disabled">Item</button>
            <button class="list-group-item list-group-item-action">Item</button>
          </div>

          <p class="fw-semibold text-primary my-3">List Group With Flush in Bootstrap</p>

          <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>
            <li class="list-group-item">Item-4</li>
            <li class="list-group-item">Item-5</li>
          </ul>

          <p class="fw-semibold text-primary my-3">List Group With Numbered in Bootstrap</p>

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

          <p class="fw-semibold text-primary my-3">List Group Custom in Bootstrap</p>

          <ul class="list-group list-group-numbered">
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div class="m-3">
                <div class="fw-bold fs-5">Heading</div>
                <p class="mt-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, laborum.</p>
              </div>
              <span class="badge bg-danger rounded-pill">15+</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div class="m-3">
                <div class="fw-bold fs-5">Heading</div>
                <p class="mt-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, laborum.</p>
              </div>
              <span class="badge bg-danger rounded-pill">15+</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div class="m-3">
                <div class="fw-bold fs-5">Heading</div>
                <p class="mt-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, laborum.</p>
              </div>
              <span class="badge bg-danger rounded-pill">15+</span>
            </li>
            <li class="list-group-item d-flex justify-content-between align-items-center">
              <div class="m-3">
                <div class="fw-bold fs-5">Heading</div>
                <p class="mt-2">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, laborum.</p>
              </div>
              <span class="badge bg-danger rounded-pill">15+</span>
            </li>
          </ul>

          <p class="fw-semibold text-primary my-3">List Group Horizontal in Bootstrap</p>
          <ul class="list-group list-group-horizontal">
            <li class="list-group-item">Item-1</li>
            <li class="list-group-item">Item-2</li>
            <li class="list-group-item">Item-3</li>
            <li class="list-group-item">Item-4</li>
            <li class="list-group-item">Item-5</li>
          </ul>

          <p class="fw-semibold text-primary my-3">List Group colors in Bootstrap</p>

          <ul class="list-group">
            <li class="list-group-item list-group-item-dark">Item-1</li>
            <li class="list-group-item list-group-item-secondary">Item-2</li>
            <li class="list-group-item list-group-item-danger">Item-3</li>
            <li class="list-group-item list-group-item-success">Item-4</li>
            <li class="list-group-item list-group-item-warning">Item-5</li>
          </ul>
          <p class="fw-semibold text-primary my-3">List Group with Badge in Bootstrap</p>

          <ul class="list-group">
            <li class="list-group-item d-flex justify-content-between align-items-center">Item <span class="badge rounded-pill bg-danger">10</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Item <span class="badge rounded-pill bg-danger">1</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Item <span class="badge rounded-pill bg-danger">50+</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Item <span class="badge rounded-pill bg-danger">3</span></li>
            <li class="list-group-item d-flex justify-content-between align-items-center">Item <span class="badge rounded-pill bg-danger">90+</span></li>
          </ul>

          <p>input:checkbox.form-check-input.me-1#c</p>
          <p class="fw-semibold text-primary my-3">List Group with Checkbox in Bootstrap</p>
          <ul class="list-group">
            <li class="list-group-item">
              <input type="checkbox" id="c1" class="form-check-input me-1" />
              <label for="c1">Checkbox 1 </label>
            </li>
            <li class="list-group-item">
              <input type="checkbox" id="c2" class="form-check-input me-1" />
              <label for="c2">Checkbox 2 </label>
            </li>
            <li class="list-group-item">
              <input type="checkbox" id="c3" class="form-check-input me-1" />
              <label for="c3">Checkbox 3 </label>
            </li>
            <li class="list-group-item">
              <input type="checkbox" id="c4" class="form-check-input me-1" />
              <label for="c4">Checkbox 4 </label>
            </li>
          </ul>
          <p class="fw-semibold text-primary my-3">List Group with Radio in Bootstrap</p>

          <ul class="list-group">
            <li class="list-group-item">
              <input type="radio" id="r1" name="radioGroup" class="form-check-input me-1" />
              <label for="r1">radio 1 </label>
            </li>
            <li class="list-group-item">
              <input type="radio" id="r2" name="radioGroup" class="form-check-input me-1" />
              <label for="r2">radio 2 </label>
            </li>
            <li class="list-group-item">
              <input type="radio" id="r3" name="radioGroup" class="form-check-input me-1" />
              <label for="r3">radio 3 </label>
            </li>
            <li class="list-group-item">
              <input type="radio" id="r4" name="radioGroup" class="form-check-input me-1" />
              <label for="r4">radio 4 </label>
            </li>
          </ul>

          <p class="fw-semibold text-primary my-3">List Group with Checkbox in Bootstrap</p>
          <ul class="list-group">
            <li class="list-group-item">
              <input type="checkbox" id="c11" class="form-check-input me-1" />
              <label for="c11" class="stretched-link">Checkbox 1 </label>
            </li>
            <li class="list-group-item">
              <input type="checkbox" id="c12" class="form-check-input me-1" />
              <label for="c12" class="stretched-link">Checkbox 2 </label>
            </li>
            <li class="list-group-item">
              <input type="checkbox" id="c13" class="form-check-input me-1" />
              <label for="c13" class="stretched-link">Checkbox 3 </label>
            </li>
            <li class="list-group-item">
              <input type="checkbox" id="c14" class="form-check-input me-1" />
              <label for="c14" class="stretched-link">Checkbox 4 </label>
            </li>
          </ul>
        </div>
      </div>
      <!--Container End-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Live Preview