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
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-
- </head>
- <body>
-
- <div class="container">
- <h2>Basic List Group Example</h2>
- <ul class="list-group">
- <li class="list-group-item">First item</li>
- <li class="list-group-item">Second item</li>
- <li class="list-group-item">Third item</li>
- </ul>
- </div>
- <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </body>
-
-
- </html>
Test it Now
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.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-
- </head>
- <body>
-
- <div class="container">
- <h2>List Group With Badges</h2>
- <ul class="list-group">
- <li class="list-group-item"><span class="badge">12</span> New</li>
- <li class="list-group-item"><span class="badge">5</span> Deleted</li>
- <li class="list-group-item"><span class="badge">3</span> Warnings</li>
- </ul>
- </div>
- <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </body>
- </html>
Test it Now
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.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-
- </head>
- <body>
-
- <div class="container">
- <h2>List Group With Linked Items</h2>
- <div class="list-group">
- <a href="#" class="list-group-item">First item</a>
- <a href="#" class="list-group-item">Second item</a>
- <a href="#" class="list-group-item">Third item</a>
- </div>
- </div>
- <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </body>
- </html>
Test it Now
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.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-
- </head>
- <body>
-
- <div class="container">
- <h2>Active Item in a List Group</h2>
- <div class="list-group">
- <a href="#" class="list-group-item active">First item (This is active item)</a>
- <a href="#" class="list-group-item">Second item</a>
- <a href="#" class="list-group-item">Third item</a>
- </div>
- </div>
- <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </body>
- </html>
Test it Now
Bootstrap List Group: Display a disable item
The class ".disabled" is used to disable a specific item in the list group.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-
- </head>
- <body>
-
- <div class="container">
- <h2>List Group With a Disabled Item</h2>
- <div class="list-group">
- <a href="#" class="list-group-item disabled">First item</a>
- <a href="#" class="list-group-item">Second item</a>
- <a href="#" class="list-group-item">Third item</a>
- </div>
- </div>
- <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </body>
- </html>
Test it Now
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
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Bootstrap Example</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
-
- </head>
- <body>
-
- <div class="container">
- <h2>List Group With Contextual Classes</h2>
- <ul class="list-group">
- <li class="list-group-item list-group-item-success">First item</li>
- <li class="list-group-item list-group-item-info">Second item</li>
- <li class="list-group-item list-group-item-warning">Third item</li>
- <li class="list-group-item list-group-item-danger">Fourth item</li>
- </ul>
-
- <h2>Linked Items With Contextual Classes</h2>
- <a href="#" class="list-group-item list-group-item-success">First item</a>
- <a href="#" class="list-group-item list-group-item-info">Second item</a>
- <a href="#" class="list-group-item list-group-item-warning">Third item</a>
- <a href="#" class="list-group-item list-group-item-danger">Fourth item</a>
- </div>
- </div>
- <script src="../ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- <script src="../maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
- </body>
- </html>
Test it Now
|