Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap List Group

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 883
    Comment on it

    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/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: