All for Joomla All for Webmasters

Bootstrap List Groups

Bootstrap list group is used to create a group of list with list items. The most basic list group is an unordered list containing list items.

The class “.list-group” within the <ul> element and the class “.list-group-item” within the <li>element are used to create a basic list group.

Bootstrap List Group Example

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Basic List Group Example</h2>
  12.   <ul class=“list-group”>
  13.     <li class=“list-group-item”>First item</li>
  14.     <li class=“list-group-item”>Second item</li>
  15.     <li class=“list-group-item”>Third item</li>
  16.   </ul>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

 

Bootstrap List Group with Badges

The badges can also be added to a list group. They will automatically be positioned to the right side.

You have to create a <span> element with class “.badge” inside the list item to create a badge.

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>List Group With Badges</h2>
  12.   <ul class=“list-group”>
  13.     <li class=“list-group-item”><span class=“badge”>12</span> New</li>
  14.     <li class=“list-group-item”><span class=“badge”>5</span> Deleted</li>
  15.     <li class=“list-group-item”><span class=“badge”>3</span> Warnings</li>
  16.   </ul>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

 

Bootstrap List Groups with Hyperlinks

You can also link items to the list group. This provides a grey background color on hover. You have to use <div> instead of <ul> and <a> instead of <li> element to create a list group with linked items.

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>List Group With Linked Items</h2>
  12.   <div class=“list-group”>
  13.     <a href=“#” class=“list-group-item”>First item</a>
  14.     <a href=“#” class=“list-group-item”>Second item</a>
  15.     <a href=“#” class=“list-group-item”>Third item</a>
  16.   </div>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

 

Bootstrap List Group: Display active item

The class “.active” is used to highlight the current item. It specifies that the specific item is in active state.

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>Active Item in a List Group</h2>
  12.   <div class=“list-group”>
  13.     <a href=“#” class=“list-group-item active”>First item (This is active item)</a>
  14.     <a href=“#” class=“list-group-item”>Second item</a>
  15.     <a href=“#” class=“list-group-item”>Third item</a>
  16.   </div>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

 

Bootstrap List Group: Display a disable item

The class “.disabled” is used to disable a specific item in the list group.

  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>List Group With a Disabled Item</h2>
  12.   <div class=“list-group”>
  13.     <a href=“#” class=“list-group-item disabled”>First item</a>
  14.     <a href=“#” class=“list-group-item”>Second item</a>
  15.     <a href=“#” class=“list-group-item”>Third item</a>
  16.   </div>
  17. </div>
  18. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  19. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  20. </body>
  21. </html>

 

Bootstrap List Group: Contextual Classes

You can add colors to the list items by using contextual classes.

The following classes are used for coloring list items:

  • .list-group-item-success
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  1.  <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.   <title>Bootstrap Example</title>
  5.   <meta charset=“utf-8”>
  6.   <meta name=“viewport” content=“width=device-width, initial-scale=1”>
  7.   <link rel=“stylesheet” href=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
  8. </head>
  9. <body>
  10. <div class=“container”>
  11.   <h2>List Group With Contextual Classes</h2>
  12.   <ul class=“list-group”>
  13.     <li class=“list-group-item list-group-item-success”>First item</li>
  14.     <li class=“list-group-item list-group-item-info”>Second item</li>
  15.     <li class=“list-group-item list-group-item-warning”>Third item</li>
  16.     <li class=“list-group-item list-group-item-danger”>Fourth item</li>
  17.   </ul>
  18.   <h2>Linked Items With Contextual Classes</h2>
  19.     <a href=“#” class=“list-group-item list-group-item-success”>First item</a>
  20.     <a href=“#” class=“list-group-item list-group-item-info”>Second item</a>
  21.     <a href=“#” class=“list-group-item list-group-item-warning”>Third item</a>
  22.     <a href=“#” class=“list-group-item list-group-item-danger”>Fourth item</a>
  23.   </div>
  24. </div>
  25. <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>
  26. <script src=“http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
  27. </body>
  28. </html>
PinIt
submit to reddit

Leave a Reply

Top