Bootstrap List Groups
The list groups are very useful and flexible component for displaying lists of elements in a beautiful manner. The most basic list group is an unordered list with list items :
Basic List Groups :
To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item :
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Basic List Groups</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<ul class="list-group">
    <li class="list-group-item">Basic List item-1</li>
    <li class="list-group-item">Basic List item-2</li>
    <li class="list-group-item">Basic List item-3</li>
</ul>
 
</body>
</html>
Output :
  • Basic List item-1
  • Basic List item-2
  • Basic List item-3
List Group With Badges :
Add icons and badges to this list group to make it more elegant. The badges component will automatically be positioned on the right.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>List Group With Badges</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<ul class="list-group">
  <li class="list-group-item">Images <span class="badge">50</span></li>
  <li class="list-group-item">Songs <span class="badge">120</span></li> 
  <li class="list-group-item">Videos <span class="badge">36</span></li> 
</ul>
 
</body>
</html>
Output :
  • Images 50
  • Songs 120
  • Videos 36
List Group With Linked Items :
The list group item hyperlinks. This will add a grey background color on hover.
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>List Group With Linked Items</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="list-group">
  <a href="#" class="list-group-item">Linked  item-1</a>
  <a href="#" class="list-group-item">Linked  item-2</a>
  <a href="#" class="list-group-item">Linked  item-3</a>
</div>
 
</body>
</html>
Active Lists and Disabled Lists :
.active class to highlight the current item and disable item, add the .disabled class.
	
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Active Lists and Disabled Lists</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<h4>Active List</h4>
<div class="list-group">
  <a href="#" class="list-group-item active">First item</a>
  <a href="#" class="list-group-item">Second item</a>
  <a href="#" class="list-group-item">Third item</a>
</div>
 
<h4>Disabled List</h4>
<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>
 
</body>
</html>
Output :
Contextual Classes :
The most contextual classes can be used to color list items.
	
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Contextual Classes</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Contextual Class "Success"</li>
  <li class="list-group-item list-group-item-info">Contextual Class "Info"</li>
  <li class="list-group-item list-group-item-warning">Contextual Class "Warning"</li>
  <li class="list-group-item list-group-item-danger">Contextual Class "Danger"</li>
</ul>
 
</body>
</html>
Output :
  • Contextual Class "Success"
  • Contextual Class "Info"
  • Contextual Class "Warning"
  • Contextual Class "Danger"

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.