Bootstrap List Groups
Your will discover how to utilize the Bootstrap list groups components in this article.
Creating List Groups with Bootstrap
List groups are highly versatile and valuable components that beautifully display lists of elements. At their core, a list group is an unordered list with the class .list-group, while the individual list items possess the class .list-group-item.
<div class="m-4">
<ul class="list-group w-50">
<li class="list-group-item">Images</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Audios</li>
</ul>
</div>
Tip: By default, list groups span the entire width of their container. However, you can explicitly set their width using Bootstrap's width utility classes (e.g., w-25, w-50, etc.) or by placing them inside grid columns.
Indicate Disabled and Active Items
To indicate the currently active selection, you can simply add the class .active to a .list-group-item. Similarly, by adding .disabled to a .list-group-item, you can visually make it appear disabled.
<div class="m-4">
<ul class="list-group w-50">
<li class="list-group-item active">Images</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item disabled">Audios</li>
</ul>
</div>
Tip: If you have a list group with linked items, using the .disabled class will make the link look disabled, but it will remain clickable. To truly disable the links, you must remove the anchor's href attribute either through JavaScript or manually.
Edge-to-Edge List Groups
For a borderless and edge-to-edge appearance of list groups within their parent container, you can optionally include the class .list-group-flush on the list-group element.
Let's examine the following example to gain a better understanding of how it functions:
<div class="m-4">
<ul class="list-group list-group-flush">
<li class="list-group-item">Images</li>
<li class="list-group-item">Documents</li>
<li class="list-group-item">Music</li>
<li class="list-group-item">Audios</li>
</ul>
</div>
Creating Numbered List Groups
Moreover, you have the option to create numbered list groups by simply adding the modifier class .list-group-numbered to the .list-group element, like this:
<div class="m-4">
<ol class="list-group list-group-numbered w-50">
<li class="list-group-item">model one</li>
<li class="list-group-item">model two</li>
<li class="list-group-item">model three</li>
<li class="list-group-item">model four</li>
</ol>
</div>
Note: Numbers are generated through CSS (in contrast to the default browser styling of the <ol> element) for better placement inside list group items and to enable easier customization. To learn more about this, explore the CSS counter-reset and counter-increment properties.
List Group with Checkboxes and Radios
Additionally, you can embed Bootstrap's customized checkboxes and radio buttons within the list group items.
An illustration is provided below, demonstrating the creation of a list group with customized checkboxes:
<div class="m-4">
<div class="list-group w-50">
<label class="list-group-item">
<input type="checkbox" class="form-check-input me-1" name="hobbies"> dancing
</label>
<label class="list-group-item">
<input type="checkbox" class="form-check-input me-1" name="hobbies"> Travel & with friends
</label>
<label class="list-group-item">
<input type="checkbox" class="form-check-input me-1" name="hobbies"> Reading novel
</label>
</div>
</div>
Likewise, custom radio buttons can be inserted within list group items, as shown here:
<div class="m-4">
<div class="list-group w-50">
<label class="list-group-item">
<input type="radio" class="form-check-input me-1" name="gender"> Male
</label>
<label class="list-group-item">
<input type="radio" class="form-check-input me-1" name="gender"> Female
</label>
</div>
</div>
You will find detailed information about custom checkboxes and radio buttons in the Bootstrap custom forms chapter.
List Group with Linked Items
In addition, you can establish links between list group items with a slight alteration in the HTML markup.
Replace the <li> with <a> tags and use the <div> element as a parent instead of <ul>. To enhance the list group's appearance, icons and badges can be incorporated. Take a look at this example:
<div class="m-4">
<div class="list-group w-50">
<a href="#" class="list-group-item list-group-item-action active">
<i class="bi-house-fill"></i> Home
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi-camera-fill"></i> Images
<span class="badge rounded-pill bg-primary float-end">135</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi-music-note-beamed"></i> Music
<span class="badge rounded-pill bg-primary float-end">60</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="bi-film"></i> Videos
<span class="badge rounded-pill bg-primary float-end">7</span>
</a>
</div>
</div>
Tip: The Bootstrap list group component is highly suitable for constructing sidebar navigation menus, such as displaying a list of products or categories on your website.
List Group with Custom Content
Moreover, by utilizing flexbox utilities, you can include nearly any HTML content within list groups.
Here's an example of a linked list group with headings and paragraphs:
<div class="m-4">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h4>Asteroid detected near earth</h4>
<small>1 days ago</small>
</div>
<p>An asteroid the size of a football field has been found close to Planet by researchers. Although it is challenging to follow, the asteroid is not dangerous to the world.</p>
</a>
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h4>Scientists found massive black hole</h4>
<small>2 days ago</small>
</div>
List Group with Contextual States
Similar to other components, contextual classes can be applied to list group items to emphasize them further. Here's an example:
<div class="m-4">
<ul class="list-group w-50">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
</ul>
</div>
Similarly, these contextual classes can be applied to linked list group items. Additionally, you can use the class .active to designate the active list group item:
<div class="m-4">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success active">A simple success list group item</a>
</div>
</div>
To create dynamic vertical tabs using the Bootstrap list group component without relying on JavaScript code, refer to the Bootstrap tabs chapter for detailed guidance.
FAQ
What is a List Group in Bootstrap?
A List Group in Bootstrap is a versatile component that allows you to display a list of items in a structured and visually appealing way. It's particularly useful when you want to present a collection of related items, such as comments, messages, or products, in a vertical format. List Groups can include text, images, badges, and even links.
How do you create a basic List Group in Bootstrap?
To create a basic List Group in Bootstrap, you can use the .list-group class along with the .list-group-item class for each individual list item. Here's an example code snippet:
<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>
How can you add contextual classes to List Group items?
Bootstrap provides contextual classes to highlight List Group items based on their status or importance. These classes include .list-group-item-primary, .list-group-item-secondary, .list-group-item-success, .list-group-item-danger, .list-group-item-warning, .list-group-item-info, and .list-group-item-light. Here's an example of using contextual classes:
<ul class="list-group">
<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-info">Info Item</li>
</ul>
How can you make List Group items actionable?
List Group items can be made actionable by adding the .list-group-item-action class. This class adds hover and active states to the items, making them look and behave like buttons. Here's an example:
<ul class="list-group">
<li class="list-group-item list-group-item-action">Clickable Item 1</li>
<li class="list-group-item list-group-item-action">Clickable Item 2</li>
<li class="list-group-item list-group-item-action">Clickable Item 3</li>
</ul>
How do you add badges to List Group items?
Badges can be added to List Group items to display additional information, such as the number of unread messages. Use the .badge class within a List Group item. Here's an example:
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Unread Messages
<span class="badge badge-primary badge-pill">5</span>
</li>
</ul>
In this example, the .d-flex, .justify-content-between, and .align-items-center classes are used to align the badge to the right side of the item.
How can you create a List Group with linked items?
You can create a List Group with linked items by wrapping the List Group items with anchor (<a>) tags. This can be useful when you want the items to navigate to different pages or sections. Here's an example:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Linked Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Linked Item 2</a>
<a href="#" class="list-group-item list-group-item-action">Linked Item 3</a>
</div>
In this example, clicking on a linked item will redirect the user to the specified URL in the href attribute.
How can you create a List Group with headers?
You can create a List Group with headers by adding the .list-group-item-heading class to a div element within each List Group item. This will style the content within that div as a header. Here's an example:
<ul class="list-group">
<li class="list-group-item">
<h5 class="list-group-item-heading">Header for Item 1</h5>
Item content goes here.
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">Header for Item 2</h5>
Item content goes here.
</li>
</ul>
How can you make List Group items disabled?
To create disabled List Group items, you can add the .disabled class to the <li> element. Disabled items will appear faded and won't be clickable. Here's an example:
<ul class="list-group">
<li class="list-group-item disabled">Disabled Item 1</li>
<li class="list-group-item">Item 2</li>
</ul>
How can you create a List Group with flush borders?
To create a List Group with flush borders (removing the outer borders and rounded corners), add the .list-group-flush class to the ul element containing the List Group. Here's an example:
<ul class="list-group list-group-flush">
<li class="list-group-item">Flush Item 1</li>
<li class="list-group-item">Flush Item 2</li>
</ul>
How can you use media objects within List Groups?
Bootstrap's List Groups can be combined with media objects to create richer content layouts. To do this, use the .media class along with .d-flex to align media components within List Group items. Here's an example:
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Item 1</h5>
Media content goes here.
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<img src="image.jpg" class="mr-3" alt="Image">
<div class="media-body">
<h5 class="mt-0">Media Item 2</h5>
Media content goes here.
</div>
</div>
</li>
</ul>
How can you add custom content to List Group items?
You can add custom content to List Group items by placing your desired elements within the .list-group-item element. This allows for flexible layouts and design customization. Here's an example:
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5>Custom Item 1</h5>
<span>$20</span>
</div>
<p>Additional details about the item.</p>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between">
<h5>Custom Item 2</h5>
<span>$30</span>
</div>
<p>Additional details about the item.</p>
</li>
</ul>
How can you create a List Group with action buttons?
To create a List Group with action buttons, you can add buttons within the List Group items. You can use Bootstrap's button classes (btn, btn-primary, etc.) for this purpose. Here's an example:
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
List Group Item with Button
<button class="btn btn-primary">Action</button>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Another Item
<button class="btn btn-danger">Delete</button>
</li>
</ul>
How can you make List Group items horizontally aligned?
To make List Group items appear horizontally aligned, you can use the .list-group-horizontal class on the List Group container. This class aligns the items side by side. Here's an example:
<div class="list-group list-group-horizontal">
<a href="#" class="list-group-item list-group-item-action">Horizontal Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Horizontal Item 2</a>
<a href="#" class="list-group-item list-group-item-action">Horizontal Item 3</a>
</div>
How can you style the active List Group item?
To style the active List Group item, you can add the .active class to the desired List Group item. This class highlights the item and gives it a different background color to indicate that it's currently active. Here's an example:
<ul class="list-group">
<li class="list-group-item">Inactive Item</li>
<li class="list-group-item active">Active Item</li>
</ul>
Can you use List Groups for navigation purposes?
Yes, List Groups can be used for navigation purposes. You can create a navigation menu using List Group items and apply appropriate styling to achieve a navigation bar-like appearance. Here's an example:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Home</a>
<a href="#" class="list-group-item list-group-item-action">About</a>
<a href="#" class="list-group-item list-group-item-action">Services</a>
<a href="#" class="list-group-item list-group-item-action">Contact</a>
</div>
How can you add icons to List Group items?
You can add icons to List Group items by using an icon library such as Font Awesome along with the appropriate HTML structure. Here's an example of adding Font Awesome icons to List Group items:
<ul class="list-group">
<li class="list-group-item"><i class="fas fa-user"></i> User Profile</li>
<li class="list-group-item"><i class="fas fa-envelope"></i> Inbox</li>
</ul>
In this example, the fas class is used for Font Awesome's solid icons. You'll need to include the Font Awesome CSS or use a similar icon library.
How can you create a List Group with different content types?
You can create a List Group with different content types by combining text, images, and other HTML elements within List Group items. Here's an example showcasing different types of content:
<ul class="list-group">
<li class="list-group-item">
<h5 class="list-group-item-heading">Text and Image</h5>
<p class="list-group-item-text">Lorem ipsum dolor sit amet.</p>
<img src="image.jpg" alt="Image">
</li>
<li class="list-group-item">
<h5 class="list-group-item-heading">List with Links</h5>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</li>
</ul>
How can you create a List Group with a custom background color?
To create a List Group with a custom background color, you can apply your own CSS styles. You can define a new class and add it to the List Group items. Here's an example:
<style>
.custom-bg {
background-color: #f0f0f0; /* Your custom color */
}
</style>
<ul class="list-group">
<li class="list-group-item custom-bg">Custom BG Item 1</li>
<li class="list-group-item custom-bg">Custom BG Item 2</li>
</ul>
How can you create a List Group with accordion behavior?
Bootstrap doesn't provide built-in accordion behavior for List Groups, but you can achieve this using Bootstrap's Collapse component in combination with List Groups. Here's an example of creating an accordion-like structure:
<div id="accordion">
<div class="list-group">
<a href="#collapse1" class="list-group-item list-group-item-action" data-toggle="collapse">Accordion Item 1</a>
<div id="collapse1" class="collapse">
<div class="list-group-item">Content for Item 1</div>
</div>
<a href="#collapse2" class="list-group-item list-group-item-action" data-toggle="collapse">Accordion Item 2</a>
<div id="collapse2" class="collapse">
<div class="list-group-item">Content for Item 2</div>
</div>
</div>
</div>
In this example, the data-toggle attribute is used to trigger the Collapse component. The collapse class is added to create the collapsible content area.
How can you adjust spacing between List Group items?
You can adjust the spacing between List Group items using Bootstrap's spacing classes such as mb-3 for margin-bottom. Apply these classes to the List Group items to control the spacing. Here's an example:
<ul class="list-group">
<li class="list-group-item mb-3">Item 1</li>
<li class="list-group-item mb-3">Item 2</li>
</ul>
How can you create a List Group with a badge indicating item count?
You can create a List Group with a badge indicating the item count by adding the badge within the List Group item. Here's an example:
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
List Group Item
<span class="badge badge-primary badge-pill">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Another Item
<span class="badge badge-primary badge-pill">10</span>
</li>
</ul>
How can you make List Group items stacked on small screens and horizontal on larger screens?
You can achieve this responsive behavior by combining List Groups with Bootstrap's responsive grid classes. Here's an example:
<div class="list-group list-group-horizontal-sm">
<a href="#" class="list-group-item list-group-item-action">Horizontal Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Horizontal Item 2</a>
</div>
In this example, the list-group-horizontal-sm class makes the List Group items horizontal on small screens, and they stack vertically on larger screens.
How can you add a border to List Group items?
You can add a border to List Group items by using Bootstrap's border utility classes. Here's an example:
<ul class="list-group">
<li class="list-group-item border">Bordered Item 1</li>
<li class="list-group-item border">Bordered Item 2</li>
</ul>
You can also use different border-related classes to achieve various border styles, such as border-top, border-bottom, etc.
How can you create a complex List Group with header, body, and footer?
You can create a complex List Group with header, body, and footer by combining various Bootstrap classes and HTML elements. Here's an example:
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Complex Item</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<small>Additional information</small>
</li>
</ul>
In this example, the d-flex, w-100, justify-content-between, and other classes are used to create a complex layout with header, body, and footer sections.
How can you make List Group items selectable like checkboxes?
Bootstrap's List Group doesn't inherently support selectable items like checkboxes. However, you can simulate this behavior using custom JavaScript or other libraries. Here's a basic example using jQuery:
<ul class="list-group">
<li class="list-group-item checkbox-item">
<label class="custom-checkbox">
<input type="checkbox">
List Group Item 1
</label>
</li>
<li class="list-group-item checkbox-item">
<label class="custom-checkbox">
<input type="checkbox">
List Group Item 2
</label>
</li>
</ul>
<script>
$(document).ready(function () {
$('.checkbox-item').click(function () {
$(this).toggleClass('active');
});
});
</script>
In this example, the .checkbox-item class is used to identify the List Group items, and custom CSS and jQuery are used to simulate checkbox-like behavior.
How can you create a List Group with different background colors for alternate items?
You can create a List Group with different background colors for alternate items using the :nth-child() CSS selector. Here's an example:
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item alternate-bg">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item alternate-bg">Item 4</li>
</ul>
<style>
.alternate-bg:nth-child(odd) {
background-color: #f0f0f0; /* Alternate background color */
}
</style>
In this example, the .alternate-bg class adds a custom background color to alternate items using the :nth-child(odd) selector.
How can you make List Group items display as horizontal cards?
To make List Group items display as horizontal cards, you can combine List Groups with Bootstrap's Card component. Here's an example:
<div class="list-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Item 1</h5>
<p class="card-text">Content of the card item.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Item 2</h5>
<p class="card-text">Content of the card item.</p>
</div>
</div>
</div>
In this example, each List Group item is represented as a div with the card class applied.
How can you create a List Group with a hover effect on items?
You can create a List Group with a hover effect on items by using Bootstrap's .list-group-item-action class and the :hover CSS pseudo-class. Here's an example:
<ul class="list-group">
<li class="list-group-item list-group-item-action">Hover Item 1</li>
<li class="list-group-item list-group-item-action">Hover Item 2</li>
</ul>
<style>
.list-group-item-action:hover {
background-color: #f0f0f0; /* Change to desired hover color */
}
</style>
In this example, the list-group-item-action class provides the hover effect, and the :hover pseudo-class changes the background color on hover.
How can you create a List Group with a scrollable container for long items?
You can create a scrollable List Group container for long items by setting a fixed height and applying the overflow-y CSS property. Here's an example:
<div class="list-group" style="max-height: 200px; overflow-y: auto;">
<a href="#" class="list-group-item list-group-item-action">Long Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Long Item 2</a>
<!-- Add more items as needed -->
</div>
auto adds a vertical scrollbar when the content exceeds the container's height.
How can you create a List Group with a responsive layout for different screen sizes?
You can create a responsive List Group layout using Bootstrap's grid classes. Here's an example of creating a horizontal layout for large screens and stacking items for smaller screens:
<div class="list-group">
<div class="row">
<a href="#" class="list-group-item list-group-item-action col-lg-3 col-md-4 col-12">Item 1</a>
<a href="#" class="list-group-item list-group-item-action col-lg-3 col-md-4 col-12">Item 2</a>
<a href="#" class="list-group-item list-group-item-action col-lg-3 col-md-4 col-12">Item 3</a>
</div>
</div>
In this example, items are stacked vertically on small screens (col-12) and displayed horizontally on medium and large screens (col-md-4 and col-lg-3).
How can you center align List Group items using flexbox utilities?
You can center-align List Group items using Bootstrap's flexbox utilities. Here's an example:
<ul class="list-group d-flex justify-content-center">
<li class="list-group-item">Centered Item 1</li>
<li class="list-group-item">Centered Item 2</li>
</ul>
The d-flex class makes the List Group a flex container, and justify-content-center centers its children horizontally.
How can you add a divider between List Group items?
Bootstrap doesn't provide built-in dividers for List Group items, but you can create your own using custom CSS. Here's an example:
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-divider"></li>
<li class="list-group-item">Item 2</li>
<li class="list-group-divider"></li>
<li class="list-group-item">Item 3</li>
</ul>
<style>
.list-group-divider {
border-top: 1px solid #e9ecef; /* Customize divider style */
margin: 5px 0;
}
</style>
In this example, the .list-group-divider class adds a custom divider between List Group items.
Conclusion
Bootstrap offers a versatile set of tools and classes for creating and customizing list items and list groups. Whether you need to create simple bulleted or numbered lists, responsive lists that adapt to various screen sizes, or even nested and structured lists, Bootstrap provides the flexibility to meet your requirements.
Customizing list groups allows you to style and organize your lists with precision, ensuring a visually appealing and user-friendly presentation. This customization extends to various elements, including checkboxes, radio buttons, and hyperlinked contents, enabling you to create interactive and engaging list groups.
The framework supports the creation of collapsible list groups and offers options for enabling and disabling list items, making it suitable for a wide range of applications, from navigation menus to data displays. Bootstrap's focus on list group customization empowers you to design personalized list groups, allowing for contextual styling, interactive item selection, and dynamic content that responds to user engagement.
You can also implement a wide range of list item states and customization options, including stylish list group designs and advanced list item customization, all while ensuring that the presentation remains responsive to various devices and screen sizes.