Bootstrap - List Groups

The list groups is an effective component for displaying a sequence of content. Change and extend them to support the regarding any content within.

Basic items

The list group is an unordered list with list items and suitable classes. Create the list group with your own CSS as per requirement.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <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>
</body>
</html>

Active items

To show the currently active selection add the classes .active to a .list-group-item.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ul class="list-group">
        <li class="list-group-item">item 1</li>
        <li class="list-group-item active" aria-current="true">An active 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>
</body>
</html>

Disabled items

To create the list group disabled add the class .disabled to .list-group-item. Some items with .disabled will need custom JavaScript to make it fully disable their click events.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <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 disabled" aria-disabled="true">A disabled item 3</li>
        <li class="list-group-item">item 4</li>
        <li class="list-group-item">item 5</li>
    </ul>
</body>
</html>

Links and buttons

By adding .list-group-item-action, you can use <a> or <button> to create an actionable list of group items with hover, disabled, and active states.

Remember not to use the standard .btn classes here.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <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 active" aria-current="true"> The current link item 3</a>
        <a href="#" class="list-group-item list-group-item-action">item 4</a>
        <a class="list-group-item list-group-item-action disabled">item 5</a>
    </div>
</body>
</html>

You can use the disabled attribute with <button> rather than the .disabled class. The element <a> doesn’t support the disabled attribute.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action ">item 1</button>
        <button type="button" class="list-group-item list-group-item-action">item 2</button>
        <button type="button" class="list-group-item list-group-item-action active" aria-current="true">The current button item 3</button>
        <button type="button" class="list-group-item list-group-item-action">item 4</button>
        <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item 4</button>
    </div>
</body>
</html>

Flush

To display list group elements edge-to-edge in a parent container (such as cards), remove borders and round corners by adding .list-group-flush.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <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 5</li>
    </ul>
</button>
 </body>
</html>

Numbered

To opt into numbered list group items, add the .list-group-numbered modifier class (and avoid the use of <ol> element).
The counter-reset on the <ol> is used to generate numbers, which are then stylized and placed on the <li> with counter-increment and content using the a::before pseudo-element.

Example

You can edit and try running this code using Edit & Run option.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - List Group</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <ol class="list-group list-group-numbered">
        <li class="list-group-item">Item One</li>
        <li class="list-group-item">Item Two</li>
        <li class="list-group-item">Item Three</li>
    </ol>
</button>
</body>
</html>

These work excellently with customized content as demonstrated below:

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ol class="list-group list-group-numbered">
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 1</div>
            Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">14</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 2</div>
             Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-start">
          <div class="ms-2 me-auto">
            <div class="fw-bold">Subheading 3</div>
              Content of list item
          </div>
          <span class="badge bg-primary rounded-pill">8</span>
        </li>
      </ol>
    </button>
    </body>
    </html>

Horizontal

By adding the class .list-group-horizontal you can modify the layout of list group items from vertical to horizontal across all breakpoints.
To create a list group horizontal starting at that breakpoint’s min-width select a responsive variant .list-group-horizontal-{sm|md|lg|xl|xxl}.
You cannot combine horizontal list groups with flush list groups.

Note: If you want to list group items of equal width when horizontal then add the class .flex-fill to each list group item.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <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>
      <ul class="list-group list-group-horizontal-sm">
        <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>
      <ul class="list-group list-group-horizontal-md">
        <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>
      <ul class="list-group list-group-horizontal-lg">
        <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>
      <ul class="list-group list-group-horizontal-xl">
        <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>
      <ul class="list-group list-group-horizontal-xxl">
        <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>
    </button>
    </body>
    </html>

Variants

The contextual classes list-group-item-primary, list-group-item-secondary ....etc. can be used to style list elements with a stateful background and colour.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <ul class="list-group">
        <li class="list-group-item">Default list group item</li>
        <li class="list-group-item list-group-item-primary">Primary list group item</li>
        <li class="list-group-item list-group-item-secondary">secondary list group item</li>
        <li class="list-group-item list-group-item-success">Success list group item</li>
        <li class="list-group-item list-group-item-danger">Danger list group item</li>
        <li class="list-group-item list-group-item-warning">Warning list group item</li>
        <li class="list-group-item list-group-item-info">Info list group item</li>
        <li class="list-group-item list-group-item-light">Light list group item</li>
        <li class="list-group-item list-group-item-dark">Dark list group item</li>
      </ul>
    </body>
    </html>

For links and buttons

You can use contextual classes with .list-group-item-action for <a> and <button> elements.
Apply .active state to indicate an active selection on a contextual list group item.

Example

You can edit and try running this code using Edit & Run option.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Bootstrap - List Group</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <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 list-group-item-primary">item 2</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">item 3</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success">item 4</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger">item 5</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning">item 6</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info">item 7</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light">item 8</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark">item 9</a>
      </div>
    </body>
    </html>

With badges

By using the certain utilities, add badges to any list group item to display unread counts, activity, and more.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        item 1
        <span class="badge bg-primary rounded-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         item 2
        <span class="badge bg-primary rounded-pill">2</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
         item 3
        <span class="badge bg-primary rounded-pill">1</span>
      </li>
    </ul>
  </body>
  </html>

Custom content

Using Flex utilities, you can add almost any HTML within, even for linked list groups as demonstrated below:

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1"> Heading 1</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small>muted small print</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">Heading 2</h5>
          <small class="text-body-secondary">2 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small class="text-body-secondary">muted small print</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">Heading 3</h5>
          <small class="text-body-secondary">1 days ago</small>
        </div>
        <p class="mb-1">Some content in paragraph</p>
        <small class="text-body-secondary">muted small print</small>
      </a>
    </div>
  </body>
  </html>

Checkboxes and radios

Add Bootstrap’s checkboxes and radios inside the list of group items and customize as required. You can use them without <label>, and don't forget to include an aria-label attribute and value for accessibility.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
        <label class="form-check-label" for="firstCheckbox">Male</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
        <label class="form-check-label" for="secondCheckbox">Female</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
        <label class="form-check-label" for="thirdCheckbox">Other's</label>
      </li>
    </ul>
  </body>
  </html>

The following example demonstrates radio buttons:

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <ul class="list-group">
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
        <label class="form-check-label" for="firstRadio">Male</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
        <label class="form-check-label" for="secondRadio">Female</label>
      </li>
      <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
        <label class="form-check-label" for="thirdRadio">Other's</label>
      </li>
    </ul>
  </body>
  </html>

To make the whole list group item clickable, use the .stretched-link style on the labels.

Example

You can edit and try running this code using Edit & Run option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <title>Bootstrap - List Group</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
      <ul class="list-group mt-2">
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched1">
            <label class="form-check-label stretched-link" for="checkboxStretched1">Item One</label>
          </li>
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched2">
            <label class="form-check-label stretched-link" for="checkboxStretched2">Item Two</label>
          </li>
          <li class="list-group-item">
            <input class="form-check-input me" type="checkbox" value="" id="checkboxStretched3">
            <label class="form-check-label stretched-link" for="checkboxStretched3">Item Three</label>
          </li>
        </ul>
  </body>
  </html>

Advertisements