Bird
Raised Fist0
Bootsrapmarkup~5 mins

List group component in Bootsrap

Choose your learning style10 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.

Practice

(1/5)
1. What is the main purpose of the Bootstrap list-group component?
easy
A. To organize and style a list of items cleanly
B. To create a navigation bar
C. To add buttons with icons
D. To display images in a grid

Solution

  1. Step 1: Understand the role of list-group

    The list-group component is designed to group related items in a list format.

  2. Step 2: Compare with other components

    Unlike navigation bars or grids, list-group focuses on listing items with consistent styling.

  3. Final Answer:

    To organize and style a list of items cleanly -> Option A

  4. Quick Check:

    List groups = styled item lists [OK]
Hint: Remember list groups are for clean lists, not nav or grids [OK]
Common Mistakes:
  • Confusing list group with navigation bar
  • Thinking it creates buttons or grids
  • Mixing it with image display components
2. Which of the following is the correct way to start a Bootstrap list group in HTML?
easy
A.
B.
C.
    D.

      Solution

      1. Step 1: Identify the container class for list groups

        Bootstrap requires the container to have the class list-group to apply styles.

      2. Step 2: Choose the correct HTML element

        Commonly, <ul> or <div> with list-group is used; here <ul> with class list-group is correct.

      3. Final Answer:

        <ul class="list-group"> -> Option C

      4. Quick Check:

        Use <ul> with class list-group [OK]
      Hint: Use <ul> or <div> with class list-group to start [OK]
      Common Mistakes:
      • Using wrong class names like list-item or group-list
      • Using <ol> without correct class
      • Using elements without the list-group class
      3. What will be the visual result of this code?
      <ul class="list-group">
  <li class="list-group-item active">Home</li>
  <li class="list-group-item">Profile</li>
  <li class="list-group-item disabled">Messages</li>
</ul>
      medium
      A. All items appear the same with no special styling
      B. A list with 'Home' highlighted, 'Profile' normal, and 'Messages' greyed out and unclickable
      C. Only 'Messages' is highlighted, others are normal
      D. The list will not render because of invalid classes

      Solution

      1. Step 1: Understand the class effects

        active highlights the item, disabled greys out and disables interaction.

      2. Step 2: Apply classes to list items

        'Home' is active (highlighted), 'Profile' normal, 'Messages' disabled (greyed and unclickable).

      3. Final Answer:

        A list with 'Home' highlighted, 'Profile' normal, and 'Messages' greyed out and unclickable -> Option B

      4. Quick Check:

        Active = highlight, Disabled = greyed out [OK]
      Hint: Active highlights, disabled greys out list items [OK]
      Common Mistakes:
      • Thinking disabled items are clickable
      • Assuming all items look the same
      • Confusing active and disabled effects
      4. Identify the error in this Bootstrap list group code:
      <ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item active">Item 2</li>
  <li class="list-group-item disabled">Item 3</li>
  <li class="list-group-item" disabled>Item 4</li>
</ul>
      medium
      A. The last <li> uses an invalid disabled attribute instead of class
      B. The active class cannot be used on list items
      C. The list-group-item class is missing on the second item
      D. The ul element should not have the list-group class

      Solution

      1. Step 1: Check usage of disabled

        Bootstrap requires disabled as a class, not as an HTML attribute on <li>.

      2. Step 2: Identify the incorrect line

        The last <li> uses disabled as an attribute, which is invalid and won't style properly.

      3. Final Answer:

        The last <li> uses an invalid disabled attribute instead of class -> Option A

      4. Quick Check:

        Use class="disabled", not disabled attribute [OK]
      Hint: Use class="disabled" not disabled attribute on list items [OK]
      Common Mistakes:
      • Using disabled as an attribute instead of class
      • Thinking active class is invalid
      • Missing list-group-item class on items
      5. You want a clickable list group where each item acts like a button and highlights on hover. Which is the correct Bootstrap structure?
      hard
      A. <div class="list-group"> <button class="list-group-item">Item 1</button> <button class="list-group-item">Item 2</button> </div>
      B. <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> </ul>
      C. <ol class="list-group"> <li class="list-group-item-action">Item 1</li> <li class="list-group-item-action">Item 2</li> </ol>
      D. <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> </div>

      Solution

      1. Step 1: Identify clickable list group items

        Bootstrap uses <a> tags with classes list-group-item and list-group-item-action for clickable items.

      2. Step 2: Check other options

        <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item">Item 2</li> </ul> uses non-clickable <li>, A misses list-group-item-action, D uses li without proper container and classes.

      3. Final Answer:

        Div with <a> tags having list-group-item and list-group-item-action classes -> Option D

      4. Quick Check:

        Clickable list items = <a> + list-group-item-action [OK]
      Hint: Clickable list items use <a> with list-group-item-action class [OK]
      Common Mistakes:
      • Using <li> without action class for clickable items
      • Missing list-group-item-action class
      • Using buttons without proper classes
      Recommended

      Ready to prove it?

      Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

      10 questions~5 mineasy hard