Bootstrap 5 is the latest major release by Bootstrap in which they have revamped the UI and made various changes. List groups are a flexible and powerful component for displaying a series of content. These can be modified and extended to support just about any content within. Use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and .list-group-item is used with <li> element.
Syntax:
<div class="list-group"> Contents... <div>
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<ul class="list-group">
<li class="list-group-item">
Data Structure
</li>
<li class="list-group-item">
Operating System
</li>
<li class="list-group-item">
Algorithm
</li>
</ul>
</div>
</body>
</html>
|
Output:
Active list item: The .active class is used to highlight the current item.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<ul class="list-group">
<li class="list-group-item active">
Data Structure
</li>
<li class="list-group-item">
Operating System
</li>
<li class="list-group-item">
Algorithm
</li>
</ul>
</div>
</body>
</html>
|
Output:
List Group With Linked Items: Use <div> and <a> tag instead of <ul> and <li> to create a list of group with linked items. The .list-group-item-action class is used to set the hover effect to change the background color to gray.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">
Data Structure
</a>
<a href="#" class="list-group-item
list-group-item-action">
Operating System
</a>
<a href="#" class="list-group-item
list-group-item-action">
Algorithm
</a>
</div>
</div>
</div>
</body>
</html>
|
Output:
Disabled Item: The .disabled class is used to disable the text content. This class set the text color to light. When used on links, it will remove the hover effect.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3" style="width: 700px;">
<h1 class="text-success">
GeeksforGeeks
</h1>
<div class="container">
<div class="list-group">
<a href="#" class="list-group-item disabled">
Android
</a>
<a href="#" class="list-group-item">
Web
</a>
<a href="#" class="list-group-item disabled">
AI
</a>
</div>
</div>
</div>
</body>
</html>
|
Output:
Flush/Remove Borders: The .list-group-flush class is used to remove some borders and rounded corners.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<div class="container">
<ul class="list-group
list-group-flush">
<a href="#" class="list-group-item">
Android
</a>
<a href="#" class="list-group-item">
Web
</a>
<a href="#" class="list-group-item">
AI
</a>
</ul>
</div>
</div>
</body>
</html>
|
Output:
Horizontal List Groups: The .list-group-horizontal class is used to display the list of items horizontally instead of vertically.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<div class="container">
<ul class="list-group
list-group-horizontal">
<a href="#" class="list-group-item">
Android
</a>
<a href="#" class="list-group-item">
Web
</a>
<a href="#" class="list-group-item">
AI
</a>
</ul>
</div>
</div>
</body>
</html>
|
Output:
Contextual Classes: It is used to set the color to the list of items. The classes for coloring the list-items are: .list-group-item-success, .list-group-item-secondary, .list-group-item-info, .list-group-item-warning, .list-group-item-danger, .list-group-item-primary, .list-group-item-dark and .list-group-item-light.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<ul class="list-group">
<li class="list-group-item
list-group-item-primary">
Web
</li>
<li class="list-group-item
list-group-item-secondary">
Android
</li>
<li class="list-group-item
list-group-item-success">
AI
</li>
<li class="list-group-item
list-group-item-warning">
Data Science
</li>
<li class="list-group-item
list-group-item-danger">
UI/UX
</li>
</ul>
</div>
</body>
</html>
|
Output:
Link items with Contextual Classes: The contextual classes can be used with list of items.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<ul class="list-group">
<a class="list-group-item
list-group-item-primary">
Web
</a>
<a class="list-group-item
list-group-item-secondary">
Android
</a>
<a class="list-group-item
list-group-item-success">
AI
</a>
<a class="list-group-item
list-group-item-warning">
Data Science
</a>
<a class="list-group-item
list-group-item-danger">
UI/UX
</a>
</ul>
</div>
</body>
</html>
|
Output:
List Group with Badges: The .badge class can be combined with the utility class to add badges inside the list of groups.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<body class="text-center">
<div class="container mt-3">
<h1 class="text-success">
GeeksforGeeks
</h1>
<ul class="list-group">
<li class="list-group-item
d-flex
justify-content-between
align-items-center">
CPP
<span class="badge bg-success">
X
</span>
</li>
<li class="list-group-item
d-flex
justify-content-between
align-items-center">
Python
<span class="badge bg-success">
Y
</span>
</li>
<li class="list-group-item d-flex
justify-content-between
align-items-center">
JavaScript
<span class="badge bg-success">
Z
</span>
</li>
</ul>
</div>
</body>
</html>
|
Output: