Welcome to The Coding College! In this tutorial, we’ll explore Bootstrap 4 List Groups, a versatile component used to display lists of items with a consistent and modern style. List groups are highly flexible and can include links, buttons, badges, and other content types, making them perfect for navigation menus, notifications, and more.
What Are Bootstrap 4 List Groups?
A list group is a flexible and powerful component for displaying lists of text, links, or other content. Bootstrap 4’s list groups allow you to create visually appealing lists with built-in styling for borders, padding, and hover effects.
Basic List Group
The simplest way to create a list group is by using the .list-group and .list-group-item classes.
Example:
<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>
</ul> Explanation:
.list-group: Creates the container for the list group..list-group-item: Styles each individual item in the list.
List Group with Links
You can turn list items into links using the <a> tag along with .list-group-item and .list-group-item-action.
Example:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Item 2</a>
<a href="#" class="list-group-item list-group-item-action">Item 3</a>
</div> Explanation:
.list-group-item-action: Adds hover and focus effects, making the list item look interactive.
Active and Disabled Items
You can highlight an active item or disable a specific item using the .active and .disabled classes.
Example:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Active Item</a>
<a href="#" class="list-group-item list-group-item-action">Item 2</a>
<a href="#" class="list-group-item list-group-item-action disabled">Disabled Item</a>
</div> List Group with Badges
Bootstrap 4 allows you to add badges to list group items to display counts or labels.
Example:
<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">4</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 2
<span class="badge badge-danger badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 3
<span class="badge badge-success badge-pill">8</span>
</li>
</ul> Explanation:
d-flex: Makes the list item a flex container for better alignment.justify-content-between: Ensures space between the text and badge..badge: Adds the badge element.
Flush List Group
A flush list group removes borders and rounded corners for a simpler design. Use the .list-group-flush class.
Example:
<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>
</ul> Contextual Classes for List Groups
You can add contextual colors to your list items to indicate their importance or status using classes like .list-group-item-primary, .list-group-item-danger, .list-group-item-success, etc.
Example:
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary Item</li>
<li class="list-group-item list-group-item-success">Success Item</li>
<li class="list-group-item list-group-item-danger">Danger Item</li>
<li class="list-group-item list-group-item-warning">Warning Item</li>
<li class="list-group-item list-group-item-info">Info Item</li>
</ul> Custom Content in List Groups
List groups can also include custom HTML content, such as headings, text, or buttons.
Example:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<h5 class="mb-1">List Group Item Heading</h5>
<p class="mb-1">Some brief text goes here to describe the item.</p>
<small>Additional info here</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<h5 class="mb-1">Another Heading</h5>
<p class="mb-1">More text to describe this item.</p>
<small>More info here</small>
</a>
</div> Horizontal List Groups
Bootstrap 4 allows you to create horizontal list groups using the .list-group-horizontal class.
Example:
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul> Note:
Horizontal list groups stack vertically on smaller screens.
Practical Example: Complete List Group
Here’s a full example combining everything:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 List Groups</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<h1 class="text-center text-primary">Bootstrap 4 List Groups</h1>
<!-- Basic List Group -->
<h3>Basic List Group</h3>
<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>
</ul>
<!-- Contextual List Group -->
<h3 class="mt-4">Contextual List Group</h3>
<ul class="list-group">
<li class="list-group-item list-group-item-primary">Primary</li>
<li class="list-group-item list-group-item-success">Success</li>
<li class="list-group-item list-group-item-danger">Danger</li>
</ul>
<!-- Custom Content List Group -->
<h3 class="mt-4">Custom Content List Group</h3>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<h5 class="mb-1">Heading</h5>
<p class="mb-1">Description goes here.</p>
<small>Additional info</small>
</a>
</div>
</div>
</body>
</html> Conclusion
Bootstrap 4 List Groups are an excellent way to organize and present information. Whether you’re building a navigation menu, a list of items, or custom components, list groups provide a clean and responsive solution.