Bootstrap List Groups

In bootstrap, list groups are useful to display the list items with custom content i.e., list items with badges, linked items, button items, list items with different colors, etc., based on our requirements.

 

To create a basic list group in bootstrap, we need to use the unordered list with .list-group class and .list-group-item classes on list items like as shown below.

 

Live Preview <ul class="list-group">
   <li class="list-group-item">Home</li>
   <li class="list-group-item">Gallery</li>
   <li class="list-group-item">Forum</li>
   <li class="list-group-item">Contact Us</li>
   <li class="list-group-item">About Us</li>
</ul>

The above example will return the result as shown below.

 

Bootstrap list group example result

Bootstrap List Group with Active / Disabled List Items

To make the list items active or disabled in the list group, we need to add .active or .disabled classes along with .list-group-item class like as shown below.

 

Live Preview <ul class="list-group">
   <li class="list-group-item active">Home</li>
   <li class="list-group-item">Gallery</li>
   <li class="list-group-item">Forum</li>
   <li class="list-group-item disabled">Contact Us</li>
   <li class="list-group-item">About Us</li>
</ul>

If you observe the above example, we added .active class to one list item and .disabled class to another list item in list group.

 

The above example will return the result as shown below.

 

Bootstrap list group with active / disabled states example result

Bootstrap List Group with Links and Buttons

To create a list group with links or buttons, we need to use <div> element instead of <ul> and <a> or <button> elements instead of <li>. In case if you want to  change the background color of list items on hover optionally, you can add .list-group-item-action class to list items.

 

Live Preview <div class="list-group">
   <a href="#" class="list-group-item list-group-item-action active">Home</a>
   <a href="#" class="list-group-item list-group-item-action">Gallery</a>
   <a href="#" class="list-group-item list-group-item-action">Forum</a>
   <a href="#" class="list-group-item list-group-item-action disabled">Contact Us</a>
   <a href="#" class="list-group-item list-group-item-action">About Us</a>
</div>

The above example will return the result as shown below.

 

Bootstrap list group with links and buttons example result

 

Same way, we can create the list group with a button (<button>) elements like as shown below. 

 

<div class="list-group">
    <button class="list-group-item list-group-item-action active">Home</button>
    <button class="list-group-item list-group-item-action">Gallery</button>
    <button class="list-group-item list-group-item-action">Forum</button>
    <button class="list-group-item list-group-item-action disabled">Contact Us</button>
    <button class="list-group-item list-group-item-action">About Us</button>
</div>

Bootstrap List Group with Contextual Classes

In bootstrap, we have different contextual classes such as .list-group-item-primary, .list-group-item-secondary, .list-group-item-successEtc. available to change the list items background and color in list group based on our requirements.

 

Live Preview <ul class="list-group">
   <li class="list-group-item">Home</li>
   <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-warning">Warning Item</li>
   <li class="list-group-item list-group-item-info">Info Item</li>
   <li class="list-group-item list-group-item-danger">Danger 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>

The above example will return the result as shown below.

 

Bootstrap List Group Items with Colors Example Result

Bootstrap Flush / Remove List Group Borders

By adding .list-group-flush class to <ul> element, we can remove some borders and rounded corners of the list group.

 

Live Preview <ul class="list-group list-group-flush">
   <li class="list-group-item">Home</li>
   <li class="list-group-item">Gallery</li>
   <li class="list-group-item">Forum</li>
   <li class="list-group-item">Contact Us</li>
   <li class="list-group-item">About Us</li>
</ul>

The above example will return the result as shown below.

 

Bootstrap flush or remove list group borders example result

Bootstrap Horizontal List Group

In case if you want to display the list group items horizontally (side by side) instead of vertically, then add .list-group-horizontal class <ul> element.

 

Live Preview <ul class="list-group list-group-horizontal">
   <li class="list-group-item">Home</li>
   <li class="list-group-item">Forum</li>
   <li class="list-group-item">Contact Us</li>
   <li class="list-group-item">About Us</li>
</ul>

The above example will return the result as shown below.

 

Bootstrap horizontal list group example result

Bootstrap List Group with Badges

In bootstrap list group, we can add badges to show unread counts, messages, etc., based on our requirements.

 

Live Preview <ul class="list-group">
   <li class="list-group-item d-flex justify-content-between align-items-center">
      Newsfeed <span class="badge badge-primary badge-pill">20+</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
      Gallery <span class="badge badge-info badge-pill">NEW</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
      Forum <span class="badge badge-success badge-pill">1 new</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
      Messages <span class="badge badge-warning badge-pill">14</span>
   </li>
   <li class="list-group-item d-flex justify-content-between align-items-center">
      Notifications <span class="badge badge-secondary badge-pill">2</span>
   </li>
</ul>

The above example will return the result as shown below.

 

Bootstrap list group with badges example result

Bootstrap List Group with Custom Content

In bootstrap list group, you can add any HTML code like heading, paragraphs, links, etc. like as shown below.

 

Live Preview <div class="list-group">
   <a href="#" class="list-group-item list-group-item-action active">
     <h4 class="list-group-item-heading">Newsfeed</h4>
     <p class="list-group-item-text">Bill commented on your post. Press here to refresh newsfeed.</p>
   </a>
   <a href="#" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Forums</h4>
     <p class="list-group-item-text">1 new post since your last visit. <i>Press to refresh</i>
     </p>
   </a>
   <a href="#" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Gallery</h4>
     <p class="list-group-item-text">10 images uploaded since your last visit. <i>Press to refresh</i>
     </p>
   </a>
</div>

The above example will return the result as shown below.

 

Bootstrap list group with custom content example result

 

This is how we can create the list groups with list items in bootstrap based on our requirements.