Post
Ask Question

Bootstrap For Beginners - Part Ten (Bootstrap List Groups)

I have started an article series on Bootstrap and published nine articles so far. Read the previous nine parts here,
Introduction

In this article we will learn about Bootstrap List Group component. It is useful for displaying lists of elements with different styles on web pages.

Basic List Groups

The basic list group is an like unordered list with list items for creating Basic List Group use class .list-group to <ul> element, and i to <li> elements.
 
Example 1: Basic List Groups
 
In this example first we will create a <div> with class .container then for Basic List Group, we will add <ul> element with class .list-group and inside this we will add <li> elements with class .list-group-item in this we will add elements of list.
 
Lets create Basic List Group by writing following code and see output. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part10</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Basic Bootstrap List Group</h3>  
  13.         <p>FOOD CATEGORY</p>  
  14.         <ul class="list-group">  
  15.             <li class="list-group-item">SWEETS</li>  
  16.             <li class="list-group-item">SNACKS</li>  
  17.             <li class="list-group-item">MISE</li>  
  18.             <li class="list-group-item">REGIONAL</li>  
  19.             <li class="list-group-item">BAKING</li>  
  20.         </ul>  
  21.     </div>  
  22.     <script src="js/jquery-2.1.4.min.js"></script>  
  23.     <script src="js/bootstrap.min.js"></script>  
  24. </body>  
  25. </html>  
Output
 
 
 
List Group With Badges
 
We can add badges to a list group item, badges will automatically be positioned on the right. For creating badge component create a <span> element with class .badge within the list item.
 
Example 2 : List Group With Badges
 
In this example we will create List Group With Badges in this we will add <ul> element with class .list-group and inside this we will add <li> elements with class .list-group-item,within list item we will add <span class="badge"> and see output by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part10</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Bootstrap List Group With Badges</h3>  
  13.         <p>MEMBER'S ACTIVITY</p>  
  14.         <ul class="list-group">  
  15.             <li class="list-group-item"><span class="badge">35</span>Articles</li>  
  16.             <li class="list-group-item"><span class="badge">150</span>Comments</li>  
  17.             <li class="list-group-item"><span class="badge">10</span>Blogs</li>  
  18.             <li class="list-group-item"><span class="badge">5</span>News</li>   
  19.             <li class="list-group-item"><span class="badge">20</span>Downloads</li>             
  20.         </ul>  
  21.     </div>  
  22.     <script src="js/jquery-2.1.4.min.js"></script>  
  23.     <script src="js/bootstrap.min.js"></script>  
  24. </body>  
  25. </html>  
Output
 
  
 
List Group With Linked Items
 
We can hyperlink list group items,we need to use <div> element instead of <ul> and anchor tag <a> instead of <li>.
 
Example 3 : List Group With Linked Items
 
In this example instead of <ul> we will create a <div> with class .list-group then instead of <li> we will add <a> tag with class .list-group-item and within this we will write item of list.by writing following code.
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part10</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Bootstrap List Group With Linked Items</h3>  
  13.         <p>MENU</p>  
  14.         <div class="list-group">  
  15.             <a href="#" class="list-group-item">Home</a>  
  16.             <a href="#" class="list-group-item">Profile</a>  
  17.             <a href="#" class="list-group-item">Settings</a>  
  18.             <a href="#" class="list-group-item">Help</a>           
  19.         </div>  
  20.     </div>  
  21.     <script src="js/jquery-2.1.4.min.js"></script>  
  22.     <script src="js/bootstrap.min.js"></script>  
  23. </body>  
  24. </html>  
Output
 
 
 
Active State and Disabled Item In List Group
 
Bootstrap provides Active State and Disabled Item features, we can highlight the current item by using .active class, to disable an item in list group we need to add .disabled class.
 
Ecample 4 : Active State and Disabled Item
  • In this example we will create List Group with linked items,now we will add class .active to a List Group Item for highlighting the current item. 
  • Now we will add .disabled class to a List Group Item for disable an item in List Group.
Lets create example of Active State and Disabled Item In List Group by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part10</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Bootstrap List Group Active State and Disabled Item</h3>  
  13.         <p>MENU</p>  
  14.         <div class="list-group">  
  15.             <!-- List Group Item with class .active -->  
  16.             <a href="#" class="list-group-item active">Home</a>  
  17.             <a href="#" class="list-group-item">Profile</a>  
  18.             <!-- List Group Item with class .disabled -->  
  19.             <a href="#" class="list-group-item disabled">Settings</a>  
  20.             <a href="#" class="list-group-item">Help</a>  
  21.         </div>  
  22.     </div>  
  23.     <script src="js/jquery-2.1.4.min.js"></script>  
  24.     <script src="js/bootstrap.min.js"></script>  
  25. </body>  
  26. </html>  
Output
 
 
  
 
List Group with Contextual Classes
 
We can use contextual classes on the list group items to color list items. The Contextual Classes we used for
coloring list-items as:
  • .list-group-item-info
  • .list-group-item-success
  • .list-group-item-warning
  • .list-group-item-danger  
Example 5:List Group with Contextual Classes

In this example we will create List Group using Contextual Classes to list group items by writing following code: 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part10</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Bootstrap List Group With Contextual Classes</h3>  
  13.         <p>MENU</p>  
  14.         <ul class="list-group">  
  15.             <li class="list-group-item list-group-item-info">Item1(Info)</li>  
  16.             <li class="list-group-item list-group-item-success">Item2(Success)</li>  
  17.             <li class="list-group-item list-group-item-warning">Item3(Warning)</li>  
  18.             <li class="list-group-item list-group-item-danger">Item4(Danger)</li>              
  19.         </ul>  
  20.     </div>  
  21.     <script src="js/jquery-2.1.4.min.js"></script>  
  22.     <script src="js/bootstrap.min.js"></script>  
  23. </body>  
  24. </html>  
Output
 
 
 
List Group With Custom Content (headings and paragraph)
 
We can add any HTML element inside a list group item like headings and paragraph for this we need to use
classes .list-group-item-heading and .list-group-item-text.
 
Example 6:List Group With Custom Content
 
In this example we will create List Group with linked items then inside list group item we will add heading with class .list-group-item-heading and paragraph with class .list-group-item-text and see output by writing following code. 
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part10</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10. <body>  
  11.     <div class="container">  
  12.         <h3>Bootstrap List Group With Custom Content</h3>  
  13.         <div class="list-group">  
  14.             <a href="#" class="list-group-item active">  
  15.                 <!--Heading with class .list-group-item-heading-->  
  16.                 <h4 class="list-group-item-heading">List Group Item Heading-1</h4>  
  17.                 <!--Paragraph with class .list-group-item-text -->  
  18.                 <p class="list-group-item-text">List Group Text Goes Here...</p>  
  19.             </a>  
  20.             <a href="#" class="list-group-item">  
  21.                 <h4 class="list-group-item-heading">List Group Item Heading-2</h4>  
  22.                 <p class="list-group-item-text">Hello C# Corner</p>  
  23.             </a>  
  24.             <a href="#" class="list-group-item">  
  25.                 <h4 class="list-group-item-heading">List Group Item Heading-3</h4>  
  26.                 <p class="list-group-item-text">Bootstrap List Group</p>  
  27.             </a>  
  28.             <a href="#" class="list-group-item">  
  29.                 <h4 class="list-group-item-heading">List Group Item Heading-4</h4>  
  30.                 <p class="list-group-item-text">Start Learning Bootstrap Today</p>  
  31.             </a>  
  32.         </div>  
  33.     </div>  
  34.     <script src="js/jquery-2.1.4.min.js"></script>  
  35.     <script src="js/bootstrap.min.js"></script>  
  36. </body>  
  37. </html>  
Output
 
 
 
In this article we focused on Bootstrap List Groups. Then in next articles we will understand all the components of Bootstrap step by step.
 
Read more articles on Bootstrap:


Similar Articles