Bootstrap - List Group

Advertisements

Previous Page
Next Page  

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 −

Live Demo 
<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 −

Live Demo 
<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 −

Live Demo 
<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 −

Live Demo 
<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>
Advertisements