Bootstrap - List Group

Basic Example

To create a basic list group in Bootstrap, use the .list-group class on a <ul> element and the .list-group-item class on each <li> element inside it. This will give you a simple, vertically stacked list with a default style.

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

Each .list-group-item represents an item within the list group. These items can contain any HTML content, such as text, images, or icons.

You can also use <a> or <button> elements instead of <li> elements to create interactive list group items. When using <a> elements, add the .list-group-item-action class to make them look like clickable items.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First link</a>
  <a href="#" class="list-group-item list-group-item-action">Second link</a>
  <a href="#" class="list-group-item list-group-item-action">Third link</a>
</div>

Using links or buttons in list groups allows you to create interactive elements that can trigger actions or navigate to different pages when clicked.

Bootstrap's list group component provides a simple and flexible way to display lists of related items, whether they are static or interactive. By applying the appropriate classes, you can quickly create visually appealing and functional list groups in your web pages.

Active Items

In Bootstrap, you can highlight the current active item in a list group to show the user's current selection or the page they are viewing. To mark an item as active, add the .active class to the .list-group-item element.

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item active">Second item (Active)</li>
  <li class="list-group-item">Third item</li>
</ul>

The .active class applies a style to the list group item, usually with a different background color and text color, to make it stand out from the other items. This helps users see their current location or selection within the list group.

When using links (<a>) as list group items, the .active class will apply the hover and focus styles to the active item.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First link</a>
  <a href="#" class="list-group-item list-group-item-action active">Second link (Active)</a>
  <a href="#" class="list-group-item list-group-item-action">Third link</a>
</div>

Note that the .active class should be applied to only one item in the list group at a time. If you need to update the active item based on user interactions or page navigation, you'll need to use JavaScript to remove the .active class from the previous active item and add it to the new active item.

Using the .active class in Bootstrap list groups is a way to give visual feedback to users about their current selection or location within a list of related items. This can improve the usability and navigation of your web application or website.

Disabled Items

Bootstrap lets you make disabled list group items to show that an item is not clickable or interactive. To make a list group item appear disabled, add the .disabled class to the .list-group-item element.

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item disabled">Second item (Disabled)</li>
  <li class="list-group-item">Third item</li>
</ul>

When the .disabled class is used, the list group item will have a lighter text color and a "not-allowed" cursor style when hovered over. This gives users a visual sign that the item is not interactive.

If you're using links (<a>) as list group items, you can also add the aria-disabled="true" attribute to the .list-group-item element to tell assistive technologies the disabled state.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">First link</a>
  <a href="#" class="list-group-item list-group-item-action disabled" aria-disabled="true">Second link (Disabled)</a>
  <a href="#" class="list-group-item list-group-item-action">Third link</a>
</div>

It's important to note that the .disabled class only provides a visual style to the list group item. It does not stop the default click event on links. If you want to stop the click function on disabled items, you'll need to use JavaScript to handle the click event and stop the default behavior.

Using the .disabled class in Bootstrap list groups is useful when you want to show that some items are not available or cannot be interacted with. This can help users understand the state of the list items and avoid confusion when trying to interact with disabled elements.

Flush List Groups

Bootstrap provides a way to remove the borders and rounded corners from a list group, creating a "flush" or seamless look. To achieve this, you can add the .list-group-flush class to the .list-group element.

<ul class="list-group list-group-flush">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

When using the .list-group-flush class, the list group items will have no borders on the sides and no rounded corners. The items will appear as a continuous, seamless list without any separation between them.

This flush style is useful when you want to create a list that blends in with the surrounding content or when you need to place a list group inside another component, such as a card.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some text inside the card.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">First item</li>
    <li class="list-group-item">Second item</li>
    <li class="list-group-item">Third item</li>
  </ul>
</div>

The list group is placed inside a card component, and the .list-group-flush class removes the borders and rounded corners, making the list group integrate smoothly with the card content.

Using the .list-group-flush class is a simple way to change the appearance of a list group and make it fit better with the design of your web page. By removing the borders and rounded corners, you can create a cleaner and more integrated look for your list groups.

Numbered List Groups

Bootstrap has a way to make numbered list groups, where each list item gets a number automatically. This is helpful when you want to show a list of items in a specific order or ranking. To make a numbered list group, add the .list-group-numbered class to the <ol> element.

<ol class="list-group list-group-numbered">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ol>

When you use the .list-group-numbered class, Bootstrap will add numbers to each list item, starting from 1. The numbers show before the content of each list item, giving a clear indication of the item's position in the list.

You can change the numbering by adding your own content to the <li> elements. Bootstrap will still use the correct number styling for each item.

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">First item</div>
      Subheading
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Second item</div>
      Subheading
    </div>
    <span class="badge bg-primary rounded-pill">28</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Third item</div>
      Subheading
    </div>
    <span class="badge bg-primary rounded-pill">7</span>
  </li>
</ol>

Each list item has a heading, a subheading, and a badge. Bootstrap's flexbox utilities help align the content within each list item. The .list-group-numbered class still uses the correct numbering for each item, even with the custom content inside.

Using numbered list groups in Bootstrap is a quick and easy way to make ordered lists with automatic numbering. This feature is helpful when showing items that have a specific sequence or ranking, such as steps in a process, a leaderboard, or a list of top items. By using the .list-group-numbered class, you can make your list groups easier to read and organize.

Horizontal List Groups

Bootstrap makes it easy to create horizontal list groups, where the list items are displayed side by side instead of vertically stacked. To create a horizontal list group, add the .list-group-horizontal class to the .list-group element.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

When using the .list-group-horizontal class, the list items will be displayed inline, creating a horizontal row. Each item will have equal width and will be evenly spaced within the list group.

You can also create responsive horizontal list groups that change to vertical layout on smaller screens. To do this, use the responsive variations of the .list-group-horizontal class: .list-group-horizontal-sm, .list-group-horizontal-md, .list-group-horizontal-lg, or .list-group-horizontal-xl.

<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

In this example, the list group will be horizontal on screens wider than the sm breakpoint (576px) and will switch to a vertical layout on smaller screens.

You can use different responsive variations to control at which breakpoint the list group changes from horizontal to vertical:

Using horizontal list groups in Bootstrap is a great way to display a list of items in a compact and readable format, especially when you have limited vertical space. By using the responsive variations, you can create list groups that adapt to different screen sizes, providing a better user experience on various devices.

Contextual Classes

Bootstrap has contextual classes that let you add colors to list group items, giving them meanings or categories. These classes follow the format .list-group-item-*, where * is the color variant. By using these classes to the .list-group-item elements, you can change the background and text color of the list items.

<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
</ul>

Bootstrap has the following contextual classes for list group items:

These contextual classes can categorize or prioritize list items based on their meaning or status. You can use the .list-group-item-success class to show a successful or completed item, or the .list-group-item-danger class to indicate an error or a high-priority item.

You can also use contextual classes with links or buttons inside list group items. When using the .list-group-item-action class on links or buttons, the hover and focus states will match the contextual class.

Using contextual classes in Bootstrap list groups is a way to add visual cues and improve the readability of your list items. By using colors for list items, you can give extra information or categorization without needing to add text or icons.

Custom Content

Bootstrap lets you add custom content to list group items, giving you the flexibility to include more than just text. You can use HTML elements and Bootstrap's utility classes to create list items with rich content, such as images, headings, paragraphs, or badges.

To add custom content to a list group item, include the desired HTML elements inside the .list-group-item element.

<ul class="list-group">
  <li class="list-group-item">
    <h5 class="mb-1">List group item heading</h5>
    <p class="mb-1">Some example text that's free-flowing within the list group item and wraps to a new line.</p>
    <small>And some small print.</small>
  </li>
  <li class="list-group-item">
    <h5 class="mb-1">List group item heading</h5>
    <p class="mb-1">Some example text that's free-flowing within the list group item and wraps to a new line.</p>
    <small>And some small print.</small>
  </li>
  <li class="list-group-item">
    <h5 class="mb-1">List group item heading</h5>
    <p class="mb-1">Some example text that's free-flowing within the list group item and wraps to a new line.</p>
    <small>And some small print.</small>
  </li>
</ul>

Each list group item has a heading (<h5>), a paragraph (<p>), and a small text element (<small>). Bootstrap's margin utility classes (.mb-1) control the spacing between these elements.

You can use Bootstrap's flexbox utilities to align and distribute the content within list group items.

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span class="me-2">
      <i class="bi bi-star-fill"></i>
    </span>
    <div class="ms-2 me-auto">
      <div class="fw-bold">List group item heading</div>
      Subheading
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <span class="me-2">
      <i class="bi bi-collection"></i>
    </span>
    <div class="ms-2 me-auto">
      <div class="fw-bold">List group item heading</div>
      Subheading
    </div>
    <span class="badge bg-primary rounded-pill">7</span>
  </li>
</ul>

The flexbox utility classes (.d-flex, .justify-content-between, .align-items-center) control the layout and alignment of the content within each list group item. The .ms-2 and .me-auto classes add spacing between the icon, content, and badge.

By using custom content and flexbox utilities, you can create visually appealing and informative list group items that go beyond simple text. This lets you present more complex data or include additional elements that provide context or interactivity to your list groups.

JavaScript Behavior

Bootstrap's list group component can be used with the tab JavaScript plugin to create dynamic tabbed interfaces. By linking list group items to tab panes, you can show and hide content based on the selected list item.

To use the tab plugin with list groups, first create a list group with the .list-group and .list-group-item classes. Add the data-bs-toggle="list" attribute to each .list-group-item element to enable the tab functionality.

Next, create a set of tab panes with the .tab-content and .tab-pane classes. Each .tab-pane element should have a unique id attribute that matches the href attribute of the corresponding .list-group-item.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">Home content</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Profile content</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Messages content</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Settings content</div>
    </div>
  </div>
</div>

The list group and tab panes are placed side by side using Bootstrap's grid system. The .active class is added to the first .list-group-item and .tab-pane elements to set the initial active tab.

When a list group item is clicked, the tab plugin automatically shows the corresponding tab pane and hides the others. The aria-controls attribute on each .list-group-item element references the id of the related .tab-pane, establishing the link between the list item and its content.

By combining the list group component with the tab JavaScript plugin, you can create interactive tabbed interfaces that allow users to switch between different content sections easily. This is a good way to organize and present information in a compact and user-friendly manner.