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>