Bootstrap - List group

In this tutorial we will learn about list groups in Bootstrap.

List groups are powerful and flexible components that can be used to display both simple and complex custom list of elements.

Simple list group

To create a list group we use the .list-group class and the item of the list are given the .list-group-item class.

<ul class="list-group">
  <li class="list-group-item">Apple</li>
  <li class="list-group-item">Mango</li>
  <li class="list-group-item">Orange</li>
  <li class="list-group-item">Banana</li>
  <li class="list-group-item">Watermelon</li>
</ul>

Output:

List with badges

We can add badges to the list item using the .badge class in a list item.

<ul class="list-group">
  <li class="list-group-item">Apple <span class="badge">10</span></li>
  <li class="list-group-item">Mango <span class="badge">4</span></li>
  <li class="list-group-item">Orange <span class="badge">5</span></li>
  <li class="list-group-item">Banana <span class="badge">12</span></li>
  <li class="list-group-item">Watermelon <span class="badge">1</span></li>
</ul>

Output:

Linked list items

We can make list items as link by using the anchor tags.

<div class="list-group">
  <a href="#" class="list-group-item">Apple</a>
  <a href="#" class="list-group-item">Mango</a>
  <a href="#" class="list-group-item">Orange</a>
</div>

Output:

Active list item

We can highlight an item in a list by adding the .active class.

<div class="list-group">
  <a href="#" class="list-group-item active">Apple</a>
  <a href="#" class="list-group-item">Mango</a>
  <a href="#" class="list-group-item">Orange</a>
</div>

Output:

Disabled list item

To disable a list item we add the .disabled class.

<div class="list-group">
  <a href="#" class="list-group-item disabled">Apple</a>
  <a href="#" class="list-group-item">Mango</a>
  <a href="#" class="list-group-item">Orange</a>
</div>

Output:

Contextual Classes

We can use contextual classes to style the list items.

<div class="list-group">
  <a href="#" class="list-group-item">Apple</a>
  <a href="#" class="list-group-item list-group-item-success">Mango</a>
  <a href="#" class="list-group-item list-group-item-info">Orange</a>
  <a href="#" class="list-group-item list-group-item-warning">Banana</a>
  <a href="#" class="list-group-item list-group-item-danger">Watermelon</a>
</div>

Output:

Custom list

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Some text goes here...</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Some text goes here...</p>
  </a>
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">Some text goes here...</p>
  </a>
</div>

Output: