Bootstrap List Group


Advertisements


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

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>
Links in List group Demo

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>
Custom Content in List group Demo

Advertisements