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

bootstrap list group horizontal bootstrap bullet list list group bootstrap 5 bootstrap list group with image bootstrap list group no border bootstrap list with icons bootstrap list example bootstrap list style bootstrap list-group-horizontal bootstrap list-group no border bootstrap list-group with image bootstrap list group scroll bootstrap list group collapse bootstrap list group background color bootstrap list group header bootstrap list group with icons bootstrap list group color react bootstrap list group

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy Rated 5 / 5 based on 378284 reviews.
Wikitechy-logo

World's No 1 Animated self learning Website with Informative tutorials explaining the code and the choices behind it all.

Wikitechy

About Us
Terms of Use
Privacy Policy
Contact Us

Workshop

Webinar

Join our Community

Advertise

Other Languages

English
Chinese
Deutsch
Russian

© 2016 - 2024 KaaShiv InfoTech, All rights reserved. Powered by Inplant Training in chennai | Internship in chennai