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 the class .list-group to element <ul>.
Add class .list-group-item to <li>.
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>
Free Domain Name Registration
Free Window Space hosting
Number of Images
24*7 support
Renewal cost per year
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>
Free Domain Name Registration
Free Window Space hosting
Number of Images

New
            24*7 support
         
Renewal cost per year

New
            Disocunt Offer
         
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>
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>

            You will get a free domain registration with website pages.
         

            We provide 24*7 support.
         

            You will get a free domain registration with website pages.
         
We provide 24*7 support.

    26 Lectures 
     2 hours 

 Anadi Sharma

    54 Lectures 
     4.5 hours 

 Frahaan Hussain

    161 Lectures 
     14.5 hours 

 Eduonix Learning Solutions

    20 Lectures 
     4 hours 

 Azaz Patel

    15 Lectures 
     1.5 hours 

 Muhammad Ismail

    62 Lectures 
     8 hours 

 Yossef Ayman Zedan
 Print
 Add Notes
 Bookmark this page