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

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-success
Etc. 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 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 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 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 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.

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