Bootstrap List Group

We will discuss about bootstrap list group in this tutorial. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.

Basic Example

The most basic list group is simply an unordered list with list items, and the proper classes. Build upon it with the options that follow, or your own CSS as needed.

• Use <ul> element with .list-group class.


• And then apply class .list-group-item to <li>.

Following example demonstrates this:

<ul class="list-group">
 <li class="list-group-item">Free Domain Name Registration</li>
 <li class="list-group-item">Free Window Space hosting</li>
 <li class="list-group-item">Number of Images</li>
 <li class="list-group-item">24*7 support</li>
 <li class="list-group-item">Renewal cost per year</li>
</ul>

Demo

Adding Badges to List Group

You can add the badges component to any list group item and it will automatically be positioned on the right. Simply add <span class="badge"> tag within the <li> tag. Following example shows this:

<ul class="list-group">
 <li class="list-group-item">Free Domain Name Registration</li>
 <li class="list-group-item">Free Window Space hosting</li>
 <li class="list-group-item">Number of Images</li>
 <li class="list-group-item">
 <span class="badge">New</span>
 24*7 support
 </li>
 <li class="list-group-item">Renewal cost per year</li>
 <li class="list-group-item">
 <span class="badge">New</span>
 Disocunt Offer
 </li>
</ul>

Demo

Linking List Group Items

If you want to make links or clickable to list group items by using anchor tags instead of list items and also make a parent <div> instead of an <ul>. There is no need for individual parents around each element.

<a href="#" class="list-group-item active">
 Free Domain Name Registration
</a>
<a href="#" class="list-group-item">24*7 support</a>
<a href="#" class="list-group-item">Free Window Space hosting</a>
<a href="#" class="list-group-item">Number of Images</a>
<a href="#" class="list-group-item">Renewal cost per year</a>

Demo

Disabled items

Add .disabled to a .list-group-item to gray it out to appear disabled.

<div class="list-group">
 <a href="#" class="list-group-item disabled">Cras justo odio</a>
	<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
	<a href="#" class="list-group-item">Morbi leo risus</a>
	<a href="#" class="list-group-item">Porta ac consectetur ac</a>
	<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Demo

Contextual classes

Use contextual classes to style list items, default or linked. Also includes .active state.

<ul class="list-group">
 <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
 <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
 <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
 <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
 <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
 <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
 <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
 <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Demo

Add Custom Content to List Group

You can add nearly any HTML content with in the above linked list group like the below example shows.

<div class="list-group">
 <a href="#" class="list-group-item active">
 <h4 class="list-group-item-heading">
 Starter Website Package
 </h4>
 </a>
 <a href="#" class="list-group-item">
 <h4 class="list-group-item-heading">
 Free Domain Name Registration
 </h4>
 <p class="list-group-item-text">
 You will get a free domain registration with website pages.
 </p>
 </a>
 <a href="#" class="list-group-item">
 <h4 class="list-group-item-heading">
 24*7 support
 </h4>
 <p class="list-group-item-text">
 We provide 24*7 support.
 </p>
 </a>
</div>
<div class="list-group">
 <a href="#" class="list-group-item active">
 <h4 class="list-group-item-heading">
 Business Website Package
 </h4>
 </a>
 <a href="#" class="list-group-item">
 <h4 class="list-group-item-heading">
 Free Domain Name Registration
 </h4>
 <p class="list-group-item-text">
 You will get a free domain registration with website pages.
 </p>
 </a>
 <a href="#" class="list-group-item">
 <h4 class="list-group-item-heading">24*7 support</h4>
 <p class="list-group-item-text">We provide 24*7 support.</p>
 </a>
</div>

Demo

Bootstrap List Group