Bootstrap List Groups

List Groups are used for displaying lists with enhanced styling.

Basic List Group

Example:

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

Output:

List Group with Badges

Example:

<ul class="list-group">
  <li class="list-group-item">Messages <span class="badge">3</span></li>
</ul>

Output:

List Group with Linked Items

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

Active and Disabled Items

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

Output:

Contextual Classes

Use .list-group-item-success, .list-group-item-warning, etc., to style items.

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Success Item</li>
</ul>

Output:

Custom Content in List Groups

<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Heading</h4>
    <p class="list-group-item-text">Description</p>
  </a>
</div>

Conclusion

In this blog, we covered essential Bootstrap components such as Glyphicons, Badges, Labels, Progress Bars, Pagination, Pager, and List Groups. These elements help developers create dynamic and user-friendly web pages. Mastering these components will allow you to build well-structured, interactive websites.

In the next blog, we will dive into Bootstrap Panels, Dropdowns, and Collapse components. Stay tuned for more insights and practical examples. To learn more, visit Credosystemz for the best training in Bootstrap and web development!

Request more information

Bootstrap List Groups