Bootstrap - List groups Demo

Ethan D. - June 1, 2024

Creating a Basic List Group

To create a basic list group in Bootstrap, you need to use the HTML structure and CSS classes provided by the framework.

Create an unordered list (<ul>) element and apply the list-group class to it. This class sets the styles for the list group, such as removing the default bullet points and adding padding and margins.

Add list items (<li>) inside the unordered list. Apply the list-group-item class to each list item. This class styles the list items with a background color, border, and padding, making them visually distinct and consistent.

Example

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

You can change the appearance of list group items by adding classes or styles. For example, you can change the background color of a list item by applying a background utility class, such as bg-primary or bg-success.

Example

<ul class="list-group">
  <li class="list-group-item bg-primary text-white">Item 1</li>
  <li class="list-group-item bg-success text-white">Item 2</li>
  <li class="list-group-item bg-warning text-dark">Item 3</li>
</ul>

You can also add content within list group items, such as headings, paragraphs, or buttons. Include the desired HTML elements inside the <li> tags.

Example

<ul class="list-group">
  <li class="list-group-item">
    <h5>Item 1</h5>
    <p>This is the content of Item 1.</p>
  </li>
  <li class="list-group-item">
    <h5>Item 2</h5>
    <p>This is the content of Item 2.</p>
    <button class="btn btn-primary">Click me</button>
  </li>
</ul>

By following this HTML structure and using the list-group and list-group-item classes, you can create a basic list group in Bootstrap. You can customize the list group by applying classes, styles, or combining it with other Bootstrap components.

Adding Icons and Badges

You can improve the look and give more information in list group items by adding icons and badges.

To include icons in list group items, you can use Bootstrap's icon library called Bootstrap Icons. Bootstrap Icons is a set of high-quality, customizable SVG icons that you can easily add to your projects.

To use Bootstrap Icons, you need to include the Bootstrap Icons CSS file in your project. You can do this by adding the following line in the <head> section of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">

Once the Bootstrap Icons CSS file is included, you can add icons to your list group items using the <i> or <span> element with the right icon class. The icon class is in the format bi-icon-name, where icon-name is the name of the icon you want to use.

Example: Adding icons to list group items

<ul class="list-group">
  <li class="list-group-item">
    <i class="bi bi-star"></i> Favorite
  </li>
  <li class="list-group-item">
    <i class="bi bi-envelope"></i> Messages
  </li>
  <li class="list-group-item">
    <i class="bi bi-gear"></i> Settings
  </li>
</ul>

Another way to give more information in list group items is by adding badges. Badges are small, inline elements that can show counts, labels, or status indicators.

To add a badge to a list group item, you can use the <span> element with the badge class. You can also apply contextual classes to the badge to change its color and meaning, such as bg-primary, bg-success, or bg-danger.

Example: Adding badges to list group items

<ul class="list-group">
  <li class="list-group-item">
    <i class="bi bi-envelope"></i> Messages
    <span class="badge bg-primary rounded-pill">4</span>
  </li>
  <li class="list-group-item">
    <i class="bi bi-bell"></i> Notifications
    <span class="badge bg-danger rounded-pill">2</span>
  </li>
  <li class="list-group-item">
    <i class="bi bi-cart"></i> Cart
    <span class="badge bg-success rounded-pill">5</span>
  </li>
</ul>

Tip: Improving user experience with icons and badges

By adding icons and badges to your list group items, you can make them look better and give more information. Icons help users quickly identify the purpose or category of each item, while badges give additional data or status information.

Remember to choose the right icons and use meaningful badge colors to improve the user experience and clearly show the intended message.

Contextual Classes

Bootstrap provides contextual classes that you can use to style list group items based on their meaning or state. These classes help convey information visually by changing the background color and text color of the list items.

To apply a contextual class to a list group item, add the class list-group-item-* to the <li> element, where * represents the contextual variant.

Contextual Class	Meaning
`list-group-item-primary`	Represents a primary or important item.
`list-group-item-secondary`	Represents a secondary or less important item.
`list-group-item-success`	Indicates a successful or positive item.
`list-group-item-danger`	Indicates an error or negative item.
`list-group-item-warning`	Represents a warning or cautionary item.
`list-group-item-info`	Represents an informational item.
`list-group-item-light`	Applies a light background color to the item.
`list-group-item-dark`	Applies a dark background color to the item.

Example: Contextual List Group

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

You can combine contextual classes with other styles to further customize the appearance of list group items.

Example: Combining Contextual Classes with Icons and Badges

<ul class="list-group">
  <li class="list-group-item list-group-item-success">
    <i class="bi bi-check-circle"></i> Success item
    <span class="badge bg-success rounded-pill">Done</span>
  </li>
  <li class="list-group-item list-group-item-warning">
    <i class="bi bi-exclamation-triangle"></i> Warning item
    <span class="badge bg-warning rounded-pill">Pending</span>
  </li>
  <li class="list-group-item list-group-item-danger">
    <i class="bi bi-x-circle"></i> Danger item
    <span class="badge bg-danger rounded-pill">Failed</span>
  </li>
</ul>

Contextual classes are a quick and easy way to visually differentiate list group items based on their context or importance. They help users understand the meaning or status of each item at a glance, improving the user experience and making the list more informative.

Linking List Group Items

Bootstrap lets you create clickable list group items by turning them into links. This is useful when you want to use list groups for navigation or to trigger actions on click.

Example: Creating a linked list group item

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

Example: Improving user experience with list-group-item-action class

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

Example: Highlighting active list group item

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">Active Link</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>

Example: Controlling link behavior within list groups

<div class="list-group">
  <a href="https://example.com" class="list-group-item list-group-item-action">External Link</a>
  <a href="#section1" class="list-group-item list-group-item-action">Anchor Link</a>
  <a href="#" class="list-group-item list-group-item-action" onclick="handleClick()">JavaScript Action</a>
</div>

Horizontal List Groups

Bootstrap lets you create horizontal list groups using flexbox. This is useful when you want to display list items side by side instead of stacked vertically.

To create a horizontal list group, apply the list-group-horizontal class to the <ul> or <div> element that contains the list items. This class uses flexbox to align the list items horizontally.

Example

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

By default, the list-group-horizontal class will display the list items horizontally at all screen sizes. However, you can also use responsive variations of the class to control when the list items stack vertically.

Bootstrap provides the following responsive classes for horizontal list groups:

Class	Description
`list-group-horizontal-sm`	Displays the list items horizontally at the `sm` breakpoint (576px) and above.
`list-group-horizontal-md`	Displays the list items horizontally at the `md` breakpoint (768px) and above.
`list-group-horizontal-lg`	Displays the list items horizontally at the `lg` breakpoint (992px) and above.
`list-group-horizontal-xl`	Displays the list items horizontally at the `xl` breakpoint (1200px) and above.
`list-group-horizontal-xxl`	Displays the list items horizontally at the `xxl` breakpoint (1400px) and above.

Example

<ul class="list-group list-group-horizontal-md">
  <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>

Tip: Choosing the right breakpoint

Consider the content and layout of your page when choosing the breakpoint for your horizontal list group. Choose a breakpoint that provides the best user experience and readability across different screen sizes.

Horizontal list groups can be combined with other list group features, such as contextual classes, badges, and custom content. Simply apply the relevant classes and styles to the list items within the horizontal list group.

Example

<ul class="list-group list-group-horizontal">
  <li class="list-group-item list-group-item-success">
    <i class="bi bi-check-circle"></i> Success item
  </li>
  <li class="list-group-item list-group-item-warning">
    <i class="bi bi-exclamation-triangle"></i> Warning item
    <span class="badge bg-warning rounded-pill">10</span>
  </li>
  <li class="list-group-item list-group-item-danger">
    <i class="bi bi-x-circle"></i> Danger item
  </li>
</ul>

By using horizontal list groups, you can create compact and visually appealing layouts for displaying related items side by side. This is especially useful for scenarios like navigation menus, filters, or status indicators.

Nesting List Groups

Bootstrap lets you create nested list groups by placing a new list group within an existing list group item. This helps create multi-level lists or show hierarchical relationships between items.

To nest a list group, add a new <ul> or <div> element with the list-group class inside an existing <li> element of the parent list group. The nested list group will be indented and visually separated from the parent list items.

Example: Nesting a list group

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

You can create multiple levels of nesting by placing list groups within list groups. This represents complex hierarchies or categorizations in your list.

Example: Multiple levels of nesting

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

When styling nested list groups, you can apply the same classes and styles as for regular list groups. However, you may want to adjust the spacing, indentation, or visual cues to distinguish between different levels of nesting.

Example: Styling nested list groups

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

Tip: Using nested list groups

Nested list groups show hierarchical relationships or categorizations within a list. However, be careful not to overuse nesting, as it can make the list complex and harder to read. Use nesting carefully and consider the user experience when designing your list structure.

By nesting list groups, you can create visually appealing and informative multi-level lists in Bootstrap. This technique is useful for showing categories, subcategories, or parent-child relationships in your content.

Custom Content in List Groups

Bootstrap lets you add custom content within list group items, giving you the flexibility to create more complex and informative lists. You can include various elements such as headings, paragraphs, images, and even other Bootstrap components inside the list group items.

To add custom content within a list group item, include the desired HTML elements inside the <li> tag with the list-group-item class.

Example: Custom content within list group items

<ul class="list-group">
  <li class="list-group-item">
    <h5>Custom Heading</h5>
    <p>This is a paragraph of text within the list group item.</p>
  </li>
  <li class="list-group-item">
    <img src="image.jpg" alt="Image" class="img-fluid">
    <p>An image can be included within the list group item.</p>
  </li>
  <li class="list-group-item">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h6>Item Title</h6>
        <small>Additional info</small>
      </div>
      <span class="badge bg-primary rounded-pill">10</span>
    </div>
  </li>
</ul>

You can also combine list groups with other Bootstrap components to create more complex and visually appealing layouts.

Example: Nesting cards within list group items

<ul class="list-group">
  <li class="list-group-item">
    <div class="card">
      <img src="card-image.jpg" class="card-img-top" alt="Card Image">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">This is a card nested within a list group item.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Another Card</h5>
        <p class="card-text">This is another card within the list group.</p>
      </div>
    </div>
  </li>
</ul>

Example: Combining media objects with list group items

<ul class="list-group">
  <li class="list-group-item">
    <div class="media">
      <img src="media-image.jpg" class="mr-3" alt="Media Image">
      <div class="media-body">
        <h5 class="mt-0">Media Heading</h5>
        <p>This is a media object combined with a list group item.</p>
      </div>
    </div>
  </li>
  <li class="list-group-item">
    <div class="media">
      <img src="media-image-2.jpg" class="mr-3" alt="Media Image">
      <div class="media-body">
        <h5 class="mt-0">Another Media</h5>
        <p>This is another media object within the list group.</p>
      </div>
    </div>
  </li>
</ul>

When adding custom content to list group items, you can style it using Bootstrap's utility classes or your own custom CSS. Apply the appropriate classes to the elements within the list group items to control their layout, spacing, and appearance.

Example: Styling custom content with utility classes

<ul class="list-group">
  <li class="list-group-item">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h6 class="mb-1">Custom Content</h6>
        <small class="text-muted">Additional info</small>
      </div>
      <span class="badge bg-success rounded-pill">New</span>
    </div>
    <p class="mb-1 mt-2">This is a paragraph within the list group item.</p>
    <small class="text-muted">Last updated 3 mins ago</small>
  </li>
</ul>