Bootstrap List group

Bootstrap list group provides a group of a list of items. The most basic list is an unordered list. We can use <ul> element with .list-group class and <li> element with .lsit-group-item. Let us see an example of Bootstrap List Groups:

<h1>Example of Basic List Groups</h1>  
<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>
Try Now

List Group With Badges

We can also use badges with list group. It will automatically position the right. To create a badge, you have to use the <span> element with class .badge inside the list item. Let us see an example of Bootstrap List Group With Badges:
<div class="container">  
  <h2>List Group With Badges</h2>  
  <ul class="list-group">  
    <li class="list-group-item">Vote <span class="badge">12</span></li>  
    <li class="list-group-item">Not vote <span class="badge">5</span></li>  
    <li class="list-group-item">Remaining Vote<span class="badge">23</span></li>  
  </ul>  
</div>
Try Now

List Group With Linked Items

We can create a hyperlink of the list group. By default it is grey color when hover on it. You have to use <div> element instead of <ul> and <a> instead of <li> element. Let us see an example of Bootstrap List Group With Linked Items:
<div class="container">  
  <h2>Example of List Group With Linked Items</h2>  
  <div class="list-group">  
    <a href="#" class="list-group-item">First item with link</a>  
    <a href="#" class="list-group-item">Second item with link</a>  
    <a href="#" class="list-group-item">Third item with link</a>  
  </div>  
</div>
Try Now

Bootstrap Active State

The bootstrap active state is used to highlight the current item. We have to use .active class. Let us see an example of Bootstrap Active State:
<div class="container">  
  <h2>Example of Active Item in a List Group</h2>  
  <div class="list-group">  
    <a href="#" class="list-group-item active">First item</a>  
    <a href="#" class="list-group-item">Second item</a>  
    <a href="#" class="list-group-item">Third item</a>  
  </div>  
</div>
Try Now

Bootstrap Disabled state

The bootstrap disabled state is used to disabled the current item. You have to use .disabled class. Let us see an example of Bootstrap Disabled State:
<div class="container">  
  <h2>Example of List Group With a Disabled Item</h2>  
  <div class="list-group">  
    <a href="#" class="list-group-item disabled">First item with disabled</a>  
    <a href="#" class="list-group-item">Second item</a>  
    <a href="#" class="list-group-item">Third item</a>  
  </div>  
</div>
Try Now

Bootstrap Contextual Classes

Bootstrap contextual classes is used to color the list items. There are various list item's color classes:
  • .list-group-item-success
  • .list-group-item-info
  • .list-group-item-warning etc.
Let us see an example of Bootstrap Contextual Classes
<div class="container">  
  <h3> Excample of List Group With Contextual Classes</h3>  
  <ul class="list-group">  
    <li class="list-group-item list-group-item-success">First item</li>  
    <li class="list-group-item list-group-item-info">Second item</li>  
  </ul>  
  <h3>Example of Linked Items With Contextual Classes</h3>  
  <p>Move the mouse over the linked items.</p>  
  <div class="list-group">  
    <a href="#" class="list-group-item list-group-item-success">First item</a>  
    <a href="#" class="list-group-item list-group-item-info">Second item</a>  
  </div>  
</div>
Try Now