Bootstrap 4 List Groups Tutorial With Example

In Bootstrap 4 List Groups Tutorial With Example, you will learn how to use a list group in Bootstrap 4. List group is a set of list items grouped in a single component. You can also add contextual classes and badges in a list item.

Bootstrap 4 List Groups Tutorial With Example

The list groups are very helpful and flexible component for displaying lists of elements in a particular manner. Basic form a list group is simply an unordered list with the class .list-group.  List groups give an alternative way to display lists in your content.

#1: Bootstrap 4 List groups

The common basic list group is an unordered list with list items. To create a basic list group for your content, you will want to assign the .list-group class to a <ul> element and the .list-group-item class to a <li> elements inside.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>List Group</h2>
  <ul class="list-group">
    <li class="list-group-item">Ronaldo</li>
    <li class="list-group-item">Messi</li>
    <li class="list-group-item">Neymar</li>
  </ul>
</div>
</body>
</html>

The example of a Bootstrap list groups will look like below screenshot.

bootstrap 4 list groups example

#2: Bootstrap 4 List Groups Active

Items in list groups may be displayed as the .active classes on the individual list group items created by the <li> tag. You can also use a .active class to highlight the current item.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>List Group Active Item</h2>
  <ul class="list-group">
    <li class="list-group-item active">Ronaldo</li>
    <li class="list-group-item">Messi</li>
    <li class="list-group-item">Neymar</li>
  </ul>
</div>
</body>
</html>

The example of a Bootstrap list groups active will look like below screenshot.

bootstrap 4 list groups tutorial

#3: Bootstrap 4 List Groups Disabled

Items in list groups may be displayed as the .disabled classes on the individual list group items created by the <li> tag. The .disabled class adds a lighter text color on the disabled item. When used on links, it will remove the hover effect.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>List Group Disabled Item</h2>
<div class="list-group">
    <a href="#" li class="list-group-item">Ronaldo</a>
    <a href="#" li class="list-group-item">Messi</a>
    <a href="#" li class="list-group-item disabled">Neymar</a>
</div>
</div>
</body>
</html>

The example of a Bootstrap list groups disabled will look like below screenshot.

bootstrap 4 list groups active-disabled example

#4: Bootstrap 4 List Groups With Linked Items

To create a list group with linked items, use <a> instead of <li> and <div> instead of <ul>.Optionally, you can add the .list-group-item-action class if you want a grey background color on hover.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>List Group With Linked Items</h2>
<div class="list-group">
    <a href="#" li class="list-group-item list-group-item-action">Ronaldo</a>
    <a href="#" li class="list-group-item list-group-item-action">Messi</a>
    <a href="#" li class="list-group-item list-group-item-action">Neymar</a>
</div>
</div>
</body>
</html>

The example of a Bootstrap list groups linked item will look like below screenshot.

bootstrap 4 list group with linked item example

#5: Bootstrap 4 List Groups Flush / Remove Borders

You can use the .list-group-flush class to remove some borders and rounded corners.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Flush / Remove Borders</h2>
</div>
<div class="container">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Ronaldo</a>
    <li class="list-group-item">Messi</a>
    <li class="list-group-item">Neymar</a>
  </ul>
</div>
</body>
</html>

The example of a Bootstrap list groups remove borders will look like below screenshot.

bootstrap 4 list group remove-flush borders example

#6: Bootstrap 4 List Groups Contextual Classes

Much like various other Bootstrap 4 classes, list group items may be combined with contextual classes add color to them. The classes for coloring list-items are:

  1. .list-group-item-success
  2. .list-group-item-secondary
  3. .list-group-item-info
  4. .list-group-item-warning
  5. .list-group-item-danger
  6. .list-group-item-primary
  7. .list-group-item-light
  8. .list-group-item-dark

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>List Group With Contextual Classes</h2>
  <ul class="list-group">
    <li class="list-group-item list-group-item-success">Success</a>
    <li class="list-group-item list-group-item-secondary">Secondary</a>
    <li class="list-group-item list-group-item-info">Info</a>
    <li class="list-group-item list-group-item-warning">Warning</a>
    <li class="list-group-item list-group-item-danger">Danger</a>
    <li class="list-group-item list-group-item-primary">Primary</a>
    <li class="list-group-item list-group-item-light">Light</a>
    <li class="list-group-item list-group-item-dark">Dark</a>
  </ul>
</div>
</body>
</html>

The example of a Bootstrap list groups with contextual classes will look like below screenshot.

bootstrap 4 list group With Contextual Classes example

#7: Bootstrap 4 List Groups With Badges

You can also add badges to this list group to make it more beautiful. The badges component will automatically be positioned on the right. Combine .badge classes with utility classes to add badges inside the list group.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 List Groups Tutorial With Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>List Group With Badges</h2>
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Messages
      <span class="badge badge-primary badge-pill">4</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      Notification
      <span class="badge badge-primary badge-pill">7</span>
    </li>
  </ul>
</div>
</body>
</html>

The example of a Bootstrap list groups with badges will look like below screenshot.

bootstrap 4 list group with badges example

At last, our Bootstrap 4 List Groups Tutorial With Example is over.

Post Your Thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.