Bootstrap - List Group
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>
Adding Badges to List Group
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>
Linking List Group Items
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>
Add Custom Content to List Group
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>