Bootstrap List Groups

Bootstrap list Groups are an alternative to simple lists in HTML. List Groups display elements in the form a group of items stacked horizontally over each other. To create bootstrap list groups add “list-group” class to the un-ordered list element. Similarly add “list-element” class to each “li” element within the un-ordered list. Take a look at the following example to see bootstrap list groups in action.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <ul class="list-group">
          <li class="list-group-item">Apple</li>
          <li class="list-group-item">Apricot</li>
          <li class="list-group-item">Banana</li>
          <li class="list-group-item">Guava</li>
        </ul>
    </body>

</html>

Download the code
Try the code

If you open the above page in browser you should see list of four fruits grouped together vertically. The list group spans through whole width of the parent element.

Adding Badges to Bootstrap List Groups

In one of the previous articles, we saw how we can add badges and labels to any element. They can also be added to list group items. To do, simply add a span element inside each li element and assign some numeric value to it. Take a look at following example to see how badges are added to list groups.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <ul class="list-group">
          <li class="list-group-item"><span class="badge">2</span>Messages</li>
          <li class="list-group-item"><span class="badge">10</span> Notifications</li> 
          <li class="list-group-item"><span class="badge">1</span> Friend Requests</li> 
        </ul>
    </body>

</html>

Download the code
Try the code

Now, if you open the above webpage in browser you should see list group item names aligned to left while the badge values aligned to right. This is the default behavior when badges are added to list groups.

Linked Items in List Groups

You can also create link items in the form of list groups. To do so, add “list-group” class an outer div. Inside the div add anchor tags for each link item and set the class for anchor tag to “list-group-item”. Also, to highlight active link, you can further add “active” class to that anchor tag of the active link. This creates list group with links inside it. Take a look at the following example.

<!DOCTYPE html>
<html>
    <head>
           
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
        <div class="list-group">
          <a href="#" class="list-group-item">Home</a>
          <a href="#" class="list-group-item active">About</a>
          <a href="#" class="list-group-item">Services</a>
          <a href="#" class="list-group-item">Portfolio</a>
          <a href="#" class="list-group-item">Contact</a>
        </div>
    </body>

</html>

Download the code
Try the code

When you open the above page in browser, you should see multiple link items in a list group. The active item should be highlighted with blue background.

<<< Bootstrap PaginationBootstrap Panel >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .