The purpose of list group component is to render complex and customized content in lists. To get a basic list group −
Add the class .list-group to element <ul>.
Add class .list-group-item to <li>.
The 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>
We can add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element. The 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"> <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>
By using the anchor tags instead of list items, we can link the list groups. We need to use <div> instead of <ul> element. The following example demonstrates this −
<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>
We can add any HTML content to the above linked list groups. The following example demonstrates this −
<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>