Bootstrap List Groups

Bootstrap List Groups are versatile components designed to display a series of related items in a list format. They are commonly used for navigation, displaying items, and organizing content in a clean and accessible manner.

Key Concepts

• List Group Definition: A list group is a series of items, typically displayed vertically, that can contain links, text, and other elements.
• Styling: Bootstrap provides built-in classes to style list groups easily.

Basic Structure

A typical list group is created using the following HTML structure:

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

Explanation of Classes

• list-group: This class is applied to the <ul> element to define it as a list group.
• list-group-item: This class is applied to each <li> element to style it as an item in the list group.

Features of List Groups

Disabled State: Disable an item with the disabled class, making it unclickable.

<li class="list-group-item disabled">Disabled Item</li>

Active State: You can highlight an active item by adding the active class.

<li class="list-group-item active">Active Item</li>

Links: You can include links in list group items for navigation.

<a href="#" class="list-group-item list-group-item-action">Link Item</a>

Example of a List Group

Here is a complete example that includes links, active, and disabled states:

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

Conclusion

Bootstrap List Groups are an excellent way to present lists of items, links, or navigation in a clean and organized manner. By using Bootstrap's classes, you can easily customize the appearance and functionality of your list groups to suit your needs.