Bootstrap List Group

Advertisements


In this article we will study about list group. 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>.

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>
Basic List group Demo

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. 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>
Badges In List group Demo

Linking List Group Items

By using anchor tags instead of list items, we can link the list groups. We need to use <div> instead of <ul> element. 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>
Links in List group Demo

Add Custom Content to List Group

We can add any HTML content to the above linked list groups. 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>
Custom Content in List group Demo


Advertisements
Advertisements