0
0
Bootsrapmarkup~5 mins

List group component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

A list group helps you show a list of items neatly. It makes lists look clean and easy to read on your webpage.

To show a list of tasks or steps in a to-do app.
To display a menu or navigation links in a sidebar.
To list messages or notifications in a user dashboard.
To group related information like contacts or products.
To highlight active or selected items in a list.
Syntax
Bootsrap
<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>

Use <ul> or <div> with list-group class to start the list.

Each item uses list-group-item class for consistent styling.

Examples
This example shows how to mark one item as active with a different background color.
Bootsrap
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Active item</li>
  <li class="list-group-item">Normal item</li>
  <li class="list-group-item">Another item</li>
</ul>
Use <a> tags with list-group-item-action to make list items clickable.
Bootsrap
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Clickable link 1</a>
  <a href="#" class="list-group-item list-group-item-action">Clickable link 2</a>
</div>
You can disable an item to show it is not clickable or available.
Bootsrap
<ul class="list-group">
  <li class="list-group-item disabled" tabindex="-1" aria-disabled="true">Disabled item</li>
  <li class="list-group-item">Enabled item</li>
</ul>
Sample Program

This page shows a simple task list using Bootstrap's list group. One item is active to highlight it, and one is disabled to show it is not available. The list uses semantic HTML and accessibility attributes.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap List Group Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>My Task List</h1>
    <ul class="list-group" aria-label="Task list">
      <li class="list-group-item">Buy groceries</li>
      <li class="list-group-item active" aria-current="true">Walk the dog</li>
      <li class="list-group-item">Read a book</li>
      <li class="list-group-item disabled" tabindex="-1" aria-disabled="true">Call plumber</li>
    </ul>
  </main>
</body>
</html>
OutputSuccess
Important Notes

The active class highlights the current or selected item.

The disabled class makes an item look inactive and prevents interaction.

Use list-group-item-action on links or buttons inside the list group to make them interactive.

Summary

List groups organize items in a clean, styled list.

Use list-group-item for each item inside a list-group container.

You can highlight, disable, or make items clickable with special classes.