Bootstrap List Groups, Full details of Bootstrap List Groups

Bootstrap Tutorial

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>

Output :

Linked item-1 Linked item-2 Linked item-3

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 :

Active List

First item Second item Third item

Disabled List

First item Second item Third item

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"

Bootstrap Tutorial

WEB DEVELOPMENT TUTORIALS

S/W RELATED LINKS

COMPETITIVE EXAMS

Active List

Disabled List

We see you’re using an ad blocker.