Bootstrap List Group
The Bootstrap list group is used to display a series of items. It is a flexible and powerful component in bootstrap. You can add links, buttons, badges, or any other components to form a list group. You can also modify it.
- The most basic list group is an unordered list with a list of items.
- Add .list-group class to <ul> element to create a list group.
- Add items to the list using .list-group-item class.
Example: Creating a list group using Bootstrap
Let's see, how we can create a basic list group using bootstrap.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Creating a List group</h2>
<ul class="list-group">
<li class="list-group-item">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item">item 3</li>
<li class="list-group-item">item 4</li>
<li class="list-group-item">item 5</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Here is the output showing list of items.
Creating a list group with active items using Bootstrap
To see which item is selected and which is active for now, use the .active class with .list-group-item in the <li> element. See the example below.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Creating a List group</h2>
<ul class="list-group">
<li class="list-group-item active">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item">item 3</li>
<li class="list-group-item">item 4</li>
<li class="list-group-item">item 5</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Here is the output which shows the active items.
Creating a list group with disabled items using Bootstrap
To disable items add .disabled class with .list-group-item in the <li> tag. The item will appear blur and cannot be selected. See the example below.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Creating a List group</h2>
<ul class="list-group">
<li class="list-group-item disabled">item 1</li>
<li class="list-group-item">item 2</li>
<li class="list-group-item">item 3</li>
<li class="list-group-item">item 4</li>
<li class="list-group-item">item 5</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Creating a list group with links using Bootstrap
Links can be added to list group items. It makes the list actionable. In addition to using it add .list-group-item-action class to hover, active, and disable states. Here is an example to add links to the group item.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> A List group link</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Link active</a>
<a href="#" class="list-group-item list-group-item-action">Link 2</a>
<a href="#" class="list-group-item list-group-item-action">Link 3</a>
<a href="#" class="list-group-item list-group-item-action">Link 4</a>
<a href="#" class="list-group-item list-group-item-action disabled">Link disable</a>
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output showing list group links.
Creating a list group with buttons using Bootstrap
List groups can be created with a button effect. To add a button use the .list-group-item class within <button> tag to add button effect to list. Let's see an example of a list group with buttons.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> A List group Buttons</h2>
<<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">Active button</button>
<button type="button" class="list-group-item list-group-item-action">Button 1</button>
<button type="button" class="list-group-item list-group-item-action">Button 2</button>
<button type="button" class="list-group-item list-group-item-action">Button 3</button>
<button type="button" class="list-group-item list-group-item-action" disabled>Button Disabled</button>
</div>
</div>
</div>
</body>
</html>
Output:
The output below shows list group with buttons.
Creating a list group with a rounded corner using Bootstrap
To remove rounded corners and borders from the group list using flush, add .item-group-flush class with list -group class for adding flush. See the example below.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> A List group with flush</h2>
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
<li class="list-group-item">Item 4</li>
</ul>
</div>
</div>
</body>
</html>
Output:
Creating a colorful list group items using Bootstrap
Add background color to item groups using contextual class. Add contextual class like list-group-item-primary with the list-group-item. Hover effects can be added with contextual classes.
Example: Creating a colorful list group item using Bootstrap
Let's see an example of a list group with a colored background.
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> A List group with contextual classes</h2>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list </a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light background list</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark background List</a>
</div>
</div>
</body>
</html>
Output:
Here is the output showing the contextual group list.
Creating a list group with badges using Bootstrap
We can add badges to the list group by using .badge class in a <span> tag inside <li> tag. See the example below.
<!doctype html>
<html lang="en">
<head>
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2> A List group with contextual classes</h2>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary list </a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary list</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info List</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light background list</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark background List</a>
</div>
</div>
</body>
</html>
</head>
<body>
<div class="container">
<h2> A List group with Badges</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">Item 1
<span class="badge badge-primary badge-pill">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Item 2
<span class="badge badge-primary badge-pill">4</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">Item 3
<span class="badge badge-primary badge-pill">2</span>
</li>
</ul>
</div>
</body>
</html>
Output:
Conclusion
Here, we learned how to create a list group and add items to them. Further modify it using different classes like buttons, links, and badges. Add contextual classes, hover effect, and flush.
