Bootstrap List Group - List group in Bootstrap with Examples



Bootstrap List Group

  • List groups are a flexible and powerful component for displaying a series of content.
  • To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item.
how-to-create-list-group-with-bootstrap

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ul class="list-group">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">KaashivInfotech</li>
      <li class="list-group-item">Wikitechy</li>
      <li class="list-group-item">Kaashiv</li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group

Bootstrap List Group Active item

  • .active to a .list-group-item.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ul class="list-group">
      <li class="list-group-item active" aria-current="true">An active item</li>
      <li class="list-group-item">KaashivInfotech</li>
      <li class="list-group-item">Wikitechy</li>
      <li class="list-group-item">Kaashiv</li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-active-color

Bootstrap List Group Disable item

  • Bootstrap List Group provides a simple way to display a list of items with optional headings, dividers, and contextual background colors. You can disable individual list items by adding the aria-disabled class to the corresponding li element.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ul class="list-group">
      <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
      <li class="list-group-item">KaashivInfotech</li>
      <li class="list-group-item">Wikitechy</li>
      <li class="list-group-item">Kaashiv</li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-disable

Bootstrap List Group Links and Buttons

  • Use <a> or <button> to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        The current link item
      </a>
      <a href="#" class="list-group-item list-group-item-action">KaashivInfotech</a>
      <a href="#" class="list-group-item list-group-item-action">Wikitechy</a>
      <a href="#" class="list-group-item list-group-item-action">Kaashiv</a>
      <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
    </div>
  </body>
</html>

Output

bootstrap-list-group-links-buttons

Bootstrap List Group Flush

  • .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">KaashivInfotech</li>
      <li class="list-group-item">Wikitechy</li>
      <li class="list-group-item">Kaashiv</li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-flush

Bootstrap List Group Number Example 1

  • Add the .list-group-numbered modifier class to opt into numbered list group items.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ol class="list-group list-group-numbered">
      <li class="list-group-item">KaashivInfotech</li>
      <li class="list-group-item">Wikitechy</li>
      <li class="list-group-item">Kaashiv</li>
    </ol>
  </body>
</html>

Output

bootstrap-list-group-number

Bootstrap List Group Number Example 2

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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</div>
          Content for 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</div>
          Content for 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</div>
          Content for list item
        </div>
        <span class="badge bg-primary rounded-pill">14</span>
      </li>
    </ol>
  </body>
</html>

Output

bootstrap-list-group-number

Bootstrap List Group Horizontal

  • .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ul class="list-group list-group-horizontal-sm">
      <li class="list-group-item">123</li>
      <li class="list-group-item">ABC</li>
      <li class="list-group-item">abc</li>
    </ul>
    <ul class="list-group list-group-horizontal-md">
      <li class="list-group-item">123</li>
      <li class="list-group-item">ABC</li>
      <li class="list-group-item">abc</li>
    </ul>
    <ul class="list-group list-group-horizontal-lg">
      <li class="list-group-item">123</li>
      <li class="list-group-item">ABC</li>
      <li class="list-group-item">abc</li>
    </ul>
    <ul class="list-group list-group-horizontal-xl">
      <li class="list-group-item">123</li>
      <li class="list-group-item">ABC</li>
      <li class="list-group-item">abc</li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-horizontal

Bootstrap List Group Contextual classes

  • Style list items with a stateful background and color.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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>

Output

bootstrap-list-group-contextual-classes

Bootstrap List Group With Badges

  • Badges to any list group item to show unread counts, activity.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        KaashivInfotech
        <span class="badge bg-primary rounded-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Wikitechy
        <span class="badge bg-primary rounded-pill">5</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
       Kaashiv
        <span class="badge bg-primary rounded-pill">3</span>
      </li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-with-badges

Bootstrap List Group Custom content

  • Bootstrap provides a List Group component that allows you to display a list of items in a vertical format. Each item in the list can have custom content associated with it, which can be displayed using the list-group-item class.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">KaashivInfotech.</p>
        <small>And some 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">List group item heading</h5>
          <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Wikitechy.</p>
        <small class="text-muted">And some 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">List group item heading</h5>
          <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Kaashiv.</p>
        <small class="text-muted">And some muted small print.</small>
      </a>
    </div>
  </body>
</html>

Output

bootstrap-list-group-custom-content

Bootstrap List Group Checkbox

  • You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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">First checkbox</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">Second checkbox</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">Third checkbox</label>
      </li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-checkbox

Bootstrap List Group Radio

  • And if you want <label> as the .list-group-item for large hit areas, you can do that, too.

Sample Code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example">
    <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">First radio</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">Second radio</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">Third radio</label>
      </li>
    </ul>
  </body>
</html>

Output

bootstrap-list-group-radio

Related Searches to Bootstrap List Group - List group in Bootstrap with Examples