List group in bootstrap with examples
Last Updated :
29 Apr, 2022
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 Bootstrap Files -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
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 Bootstrap Files -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
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>
<!-- Add Bootstrap Links -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity=
"sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous">
</script>
</head>
<body>
<p>To do list</p>
<ul class="list-group">
<!-- Using the disabled bootstrap class on below
List Item will make it faded -->
<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>
<!-- Add Bootstrap Links -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
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>
<!-- Add important Bootstrap Links -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
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>
<!-- Add Bootstrap Links -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
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>
<!-- Adding Bootstrap Classes -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
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:
Similar Reads
Responsive Video or Slideshow Embeds in Bootstrap with Examples Bootstrap allows creating responsive video or slideshow embeds based on the width of the display or parent element by creating a native ratio that scales with the device. Using responsive video or slideshow embeds the content can be scaled automatically as per the screen size or the parent container
1 min read
Screen Reader utilities in bootstrap with Examples The screen reader utility in Bootstrap helps to restrict an element to the screen readers only. That is by using the screen reader utility we can hide an element in all other devices except for screen readers. The Screen Reader utility also provide an option to display the hidden elements again when
2 min read
Input Groups in Bootstrap with Examples Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs. Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes
7 min read
Bootstrap Buttons Bootstrap Buttons are pre-designed styled buttons elements that come in various styles, colors, and sizes. Bootstrap buttons are pre-defined by Bootstrap classes. Solid ButtonsBootstrap provides us with a series of classes that correspond to different solid button styles. These classes are listed be
2 min read
Responsive images in Bootstrap with Examples Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on dif
3 min read
Borders in bootstrap with examples Borders: Borders are generally used to display an outline around a box or table cell or any other HTML element. In Bootstrap, there are different classes available to add or remove borders. The classes that are used to add borders are referred as Additive classes and those that are used to remove bo
4 min read
Displaying inline and multiline blocks of code using Bootstrap Bootstrap provides a number of classes for displaying inline and multiline blocks of code. Displaying Inline Code: Inline code should be wrapped in <code> tags. The resulting text will be displayed in a fixed-width font and given a red font color. Note: The < and > tags should be replace
3 min read
BootStrap | Positioning an element with Examples The Bootstrap framework provides us with a series of classes that allows us to change the position of an element. It provides us with five classes that are common in function with the CSS position property. In addition, it provides three additional classes for controlling the position of an element.
6 min read
Bootstrap Float Utilities Bootstrap provides us a series of float utility classes, that allow an element to float left, or right, or make it not to float, just like CSS float property.Bootstrap breakpoints:Â sm: Viewport greater than 576px.md: Viewport greater than 768px.lg: Viewport greater than 992px.xl: Viewport greater th
6 min read
Bootstrap | figure class with Examples A figure is used when one needs to display a piece of content, generally images with an optional caption. The figure class in Bootstrap is used to add styling to the default figure elements. The base .figure class is used to indicate a figure element. The .figure-img is used to indicate the image us
1 min read