The List group component is used to render complex and customized content in lists.  

Basic List Groups :- 

To get a basic list group −

•  In element <ul> you should add the class .list-group.

• In <li> add class .list-group-item.

<ul class = "list-group">
   <li class = "list-group-item">Home</li>
   <li class = "list-group-item">About</li>
   <li class = "list-group-item">Gallery</li>
   <li class = "list-group-item">Services</li>
   <li class = "list-group-item">Contact Us</li>
</ul>

https://jsfiddle.net/bdwgbxf0/2/

Adding Badges to List Groups :-  

Badges component can be added to any list group item and its automatic position is to the right. Simply add <span class = "badge"> within the <li> element as shown below :-

<ul class = "list-group">
   <li class = "list-group-item">Home</li>
   <li class = "list-group-item">About</li>
   <li class = "list-group-item">Gallery</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
     Services
   </li>
   
   <li class = "list-group-item">Contact</li>
   
   <li class = "list-group-item">
      <span class = "badge">New</span>
      Disocunt Offer
   </li>
	
</ul>

https://jsfiddle.net/bdwgbxf0/

Linking List Group Items :-

To link the list groups, you can use the anchor tag instead of list items and also you  need to use <div> instead of <ul> element as shown below :-

<div>
<a href = "#" class = "list-group-item active">Home</a>

<a href = "#" class = "list-group-item">About</a>
<a href = "#" class = "list-group-item">Gallery</a>
<a href = "#" class = "list-group-item">Services</a>
<a href = "#" class = "list-group-item">Contact</a>
</div>

https://jsfiddle.net/bdwgbxf0/1/