List Groups are used to display a series of content. We can modify them to support any content as per our needs. The use of List-Groups is just to display a series or list of content in an organized way.
Below is a basic List Group created using unordered_lists in HTML, and appropriate Bootstrap classes:
HTML
<!DOCTYPE html>
<html>
<head>
<title>List Groups example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>To do list</p>
<ul class="list-group">
<li class="list-group-item">study</li>
<li class="list-group-item">pay bills</li>
<li class="list-group-item">call mom</li>
<li class="list-group-item">drop an email</li>
</ul>
</body>
</html>
|
Output:
Active List Items: Add .active class to the list item to indicate that it is the currently active item.
HTML
<!DOCTYPE html>
<html>
<head>
<title>List Groups example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>To do list</p>
<ul class="list-group">
<li class="list-group-item active">study</li>
<li class="list-group-item">pay bills</li>
<li class="list-group-item">call mom</li>
<li class="list-group-item">drop an email</li>
</ul>
</body>
</html>
|
Output:
Disabled List Items: Add .disabled class to a list item to indicate it is disabled. When the content to be disabled is a link/button, we may need to add custom javascript code to disable items completely.
HTML
<!DOCTYPE html>
<html>
<head>
<title>List Groups example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>To do list</p>
<ul class="list-group">
<li class="list-group-item disabled">study</li>
<li class="list-group-item">pay bills</li>
<li class="list-group-item">call mom</li>
<li class="list-group-item">drop an email</li>
</ul>
</body>
</html>
|
Output:
Hyperlinks and Buttons: Use .list-group-item-action class to create actionable list items with hover, disabled and active states.
HTML
<!DOCTYPE html>
<html>
<head>
<title>List Groups example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>Social Networks</p>
<ul class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Google</a>
<a href="#" class="list-group-item
list-group-item-action active">Facebook</a>
<a href="#" class="list-group-item
list-group-item-action disabled">Twitter</a>
<a href="#" class="list-group-item
list-group-item-action">LinkedIn</a>
</ul>
</body>
</html>
|
Output:
Flush: Use the Flush class to remove some borders and rounded corners, so that it looks good in the parent container.
HTML
<!DOCTYPE html>
<html>
<head>
<title>List Groups Example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>To do lists</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">study</li>
<li class="list-group-item">pay bills</li>
<li class="list-group-item">call mom</li>
<li class="list-group-item">drop an email</li>
</ul>
</body>
</html>
|
Output:
Contextual Classes: Use contextual classes to style list items with suitable background and color.
HTML
<!DOCTYPE html>
<html>
<head>
<title>List Groups example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<ul class="list-group">
<li class="list-group-item">
Basic list group item
</li>
<li class="list-group-item
list-group-item-primary">
Primary list group item
</li>
<li class="list-group-item
list-group-item-secondary">
Secondary list group item
</li>
<li class="list-group-item
list-group-item-success">
Success list group item
</li>
<li class="list-group-item
list-group-item-danger">
Danger list group item
</li>
<li class="list-group-item
list-group-item-warning">
Warning list group item
</li>
<li class="list-group-item
list-group-item-info">
Info list group item
</li>
<li class="list-group-item
list-group-item-light">
Light list group item
</li>
<li class="list-group-item
list-group-item-dark">
Dark list group item
</li>
</ul>
</body>
</html>
|
Output:
Badges: We can add badges to list group items as shown below:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Badge Example</title>
<link rel="stylesheet" href=
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<div class="list-group">
<button type="button"
class="list-group-item list-group-item-action">
NOTIFICATIONS
<span class="badge badge-pill badge-light">2</span>
</button>
<button type="button"
class="list-group-item list-group-item-action">
MESSAGES
<span class="badge badge-pill badge-warning">2</span>
</button>
<button type="button"
class="list-group-item list-group-item-action">
UPDATES
<span class="badge badge-pill badge-danger">2</span>
</button>
<button type="button"
class="list-group-item list-group-item-action">
NEWS
<span class="badge badge-pill badge-success">2</span>
</button>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari
Reference:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
29 Apr, 2022
Like Article
Save Article