bootstrap
  1. bootstrap-list-group
PreviousNext

Bootstrap List Group

  • A Bootstrap list group is a collection of related items displayed in a vertical or horizontal list.
  • It is commonly used to present a set of links or actions in a compact format.

Syntax

To create a Bootstrap list group in your HTML file, you need to use the ul and li tags and apply the list-group class to the ul element.

Here's an example syntax for a horizontal list group:

<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>
</ul>

Example

Add .active to a .list-group-item to indicate the current active selection.

<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>
Try Playground

Example

Here's an example of a horizontal list group with images.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">
    <img src="https://dummyimage.com/50x50/000/fff" alt="Item 1">
    <span>Item 1</span>
  </li>
  <li class="list-group-item">
    <img src="https://dummyimage.com/50x50/000/fff" alt="Item 2">
    <span>Item 2</span>
  </li>
  <li class="list-group-item">
    <img src="https://dummyimage.com/50x50/000/fff" alt="Item 3">
    <span>Item 3</span>
  </li>
</ul>
Try Playground

With badges

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

<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>
Try Playground

Explanation

In the example above, we used the following classes to create the list group:

  • list-group: this is the main class that indicates that this is a list group.
  • list-group-item: this class is applied to each list item.
  • list-group-horizontal: this class is used to display the list items horizontally instead of vertically.

We also added an img element inside each list item to display an image, and a span element to display a label for each item.

Use

Bootstrap list groups can be used to present various kinds of content in a compact and organized way, such as:

  • A list of links or buttons
  • A set of images or icons with labels
  • A list of items with badges displaying additional information

Important Points

  • Bootstrap list groups are a flexible and versatile way to present related items in a concise format.
  • List groups can be displayed vertically or horizontally, and can contain various kinds of content such as images, icons, text, or links.
  • You can customize the appearance of list groups by using different classes and styles.

Summary

Bootstrap list groups are a practical and effective way to display related items in a concise and organized format. By using different classes and styles, you can create vertical or horizontal list groups with various kinds of content and customize their appearance to suit your needs.

DropdownsNavbar
Published on: